Vue Component To Create Popups And Tooltips

Popper for Vue is simple, powerful, and configurable. Popper v2.x!! Places a popup element near the reference object. It will always automatically position itself in a visible position. Supports adding an “arrow” element.

tooltip vs popover, popover on hover, popover design system, popover with html content, bootstrap popover example

Highly Configurable Floating Panels, Modals, Tooltips | jsPanel

How to make use of it:

Install and download:

# Yarn
$ yarn add @soldeplata/popper-vue

# NPM
$ npm i @soldeplata/popper-vue

1. Import and register the component.

import PopperVue from '@soldeplata/popper-vue';

export default {
  components: {
    PopperVue,
  },
};

2. Create a base popup component as follows:

<PopperVue
  :options="options"
>
  <button @click="show = !show">
    Click me
  </button>
  <template #popper>
    I am the popper element
  </template>
</PopperVue>

3. Component props available.

arrow: {
  type: Boolean,
  default: false,
},
arrowClass: {
  type: [Object, Array, String],
  default: undefined,
},
/**
 * Any options should follow popper documentation
 * https://popper.js.org/docs/v2/
 */
options: {
  type: Object,
  default: () => {},
},
popperClass: {
  type: [Object, Array, String],
  default: undefined,
},
show: {
  type: Boolean,
  default: false,
},

Create Tooltips & Popovers, Popper for Vue Plugin/Github