Tippy.js Directive & Component For Vue 3

Install & Download:

# Yarn
$ yarn add tippy.vue
# NPM
$ npm i tippy.vue

Description:

An easy-to-use library that allows you to use Tippy.js as a directive or a component in Vue 3 applications.

How to use it:

1. Import the necessary tippy library.

import tippy from 'tippy.js'
@import '~tippy.js/dist/tippy.css';
tippy.setDefaultProps({
  // tippy props
});

2. Import and register the Tippy.js Directive & Component.

import {TippyPlugin} from 'tippy.vue';
app.use(TippyPlugin);
app.use(TippyPlugin, {
  tippyDefaults: {},
});

// OR
import {TippyDirective, Tippy, TippySingleton} from 'tippy.vue';
app.directive('tippy', TippyDirective);
app.component('tippy', Tippy);
app.component('tippy-singleton', TippySingleton);

3. Use it as a directive.

<button v-tippy="'Some content'">Static</button>
<button v-tippy="`Seconds: ${seconds}`">Counter</button>
<button v-tippy="{content: 'Some content', placement: 'right'}">Side</button>

4. Use it as a component.

<button v-tippy>Hover Me</button>
<tippy>Tooltip Here</tippy>

5. It also supports multiple tippy instances, which means that all matched tooltips will share fades, delays, and smooth transitions.

<tippy-singleton delay="200"/>
<button v-tippy>1</button>
<tippy singleton>Item 1</tippy>
<button v-tippy>2</button>
<tippy singleton>Item 2</tippy>
<button v-tippy>3</button>
<tippy singleton>Item 3</tippy>

6. Available props.

/**
 * The v-tippy target name. Defaults to `""` (the default name used by `v-tippy`)
 */
target: {
  type: String as PropType<string | '_parent'>,
  required: false,
  default: ""
},
/**
 * Whether to perform a deep search for targets (using querySelector) or to only search for direct siblings.
 */
deepSearch: {
  type: Boolean,
  required: false,
  default: false
},
singleton: {
  type: String as PropType<string | '' | null>,
  required: false,
  default: null,
},

Preview:

Changelog:

v3.2.1 (06/27/2022)

• Fix lazy loading breaking singleton tooltips

v3.2.0 (06/27/2022)

• Made <tippy> only render the content when it’s actually open and added the eager prop to disable this
• Improved the type hinting/typechecking for the delay prop
• Added optionPlugin and inferPlugin

v3.1.5 (03/22/2022)

• Add full code completion support