Create Tooltips & Popovers In Vue – Popper

Install & Download:

# Yarn
$ yarn add @soldeplata/popper-vue
# NPM
$ npm i @soldeplata/popper-vue

Description:

Popper is a Vue.js component to create customizable tooltip- and popover-like popups on the app. Based on the Popper.js library.

How to use it:

1. Import and register the component.

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

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

2. Create a basic popover component as follows:

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

3. Available component props.

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,
},

Preview:

Changelog:

08/26/2023

• v1.0.5