Easy Tooltips With Vue – v-tooltip

A Vue.js component used to create nice clean tooltips attaching to any element, based on the Popper.js.

How to use it:

1. Import and register the v-tooltip plugin.

// Vue 2
import Vue from 'vue' 
import VTooltip from 'v-tooltip' 
import 'v-tooltip/dist/v-tooltip.css' 
Vue.use(VTooltip);
// OR
import Vue from 'vue'
import {
  VTooltip,
  VClosePopper,
  Dropdown,
  Tooltip,
  Menu
} from 'v-tooltip'
Vue.directive('tooltip', VTooltip)
Vue.directive('close-popper', VClosePopper)
Vue.component('VDropdown', Dropdown)
Vue.component('VTooltip', Tooltip)
Vue.component('VMenu', Menu)

// Vue 3
import VTooltipPlugin from 'v-tooltip'
app.use(VTooltipPlugin)
import 'v-tooltip/dist/v-tooltip.css'
// OR
import {
  VTooltip,
  VClosePopper,
  Dropdown,
  Tooltip,
  Menu
} from 'v-tooltip'
app.directive('tooltip', VTooltip)
app.directive('close-popper', VClosePopper)
app.component('VDropdown', Dropdown)
app.component('VTooltip', Tooltip)
app.component('VMenu', Menu)

2. Use it as a tooltip directive.

<button v-tooltip="Tooltip Content">

3. Use it to create a dropdown menu.

<VDropdown>
  <button>Click me</button>
  <template #popper>
    <MyAwesomeComponent/>
  </template>
</VDropdown>

4. All default configs.

export const config = {
  // Disable popper components
  disabled: false,
  // Default position offset [skidding, distance] (px)
  offset: [0, 5],
  // Default container where the tooltip will be appended
  container: 'body',
  // Element used to compute position and size boundaries
  boundary: undefined,
  // Skip delay & CSS transitions when another popper is shown, so that the popper appear to instanly move to the new position.
  instantMove: false,
  // Auto destroy tooltip DOM nodes (ms)
  disposeTimeout: 5000,
  // Triggers on the popper itself
  popperTriggers: [],
  // Positioning strategy
  strategy: 'absolute',
  // Popperjs modifiers
  modifiers: [],
  // Other options passed to Popperjs constructor
  popperOptions: {},
  // Themes
  themes: {
    tooltip: {
      // Default tooltip placement relative to target element
      placement: 'top',
      // Default events that trigger the tooltip
      triggers: ['hover', 'focus', 'touch'],
      // Close tooltip on click on tooltip target
      hideTriggers: events => [...events, 'click'],
      // Delay (ms)
      delay: {
        show: 200,
        hide: 0,
      },
      // Update popper on content resize
      handleResize: false,
      // Enable HTML content in directive
      html: false,
      // Displayed when tooltip content is loading
      loadingContent: '...',
    },
    dropdown: {
      // Default dropdown placement relative to target element
      placement: 'bottom',
      // Default events that trigger the dropdown
      triggers: ['click'],
      // Delay (ms)
      delay: 0,
      // Update popper on content resize
      handleResize: true,
      // Hide on clock outside
      autoHide: true,
    },
    menu: {
      $extend: 'dropdown',
      triggers: ['hover', 'focus'],
      popperTriggers: ['hover', 'focus'],
      delay: {
        show: 0,
        hide: 400,
      },
    },
  },
}

Preview:

Changelog:

v3.0.0beta20 (01/13/2022)

• Bugfixes
• add popper methods show/hide to createTooltip()

Download Details:

Author: Akryum

Live Demo: https://v-tooltip.netlify.app/guide/#quick-start

Download Link: https://github.com/Akryum/vue-tooltip/archive/master.zip

Official Website: https://github.com/Akryum/vue-tooltip

Install & Download:

# Vue 2
$ npm i [email protected]

# Vue 3
$ npm i [email protected]