Auto tooltip for Vue.js

• Autotooltip directive.

# pnpm
$ pnpm add vue-autotooltip

# yarn
$ yarn add vue-autotooltip

# npm
$ npm i vue-autotooltip

1. Import styles

import 'vue-autotooltip/dist/style.css'

2. Install directive

import Vue from 'vue'
import { Autotooltip } from 'vue-autotooltip'

// ...

Vue.directive('autotooltip', Autotooltip)

// ...

3. Use it where needed

<div>
  <span v-autotooltip>tooltip content 2</span>
</div>

• If the binding value is a string, it will be used by content of tooltip.
• If the binding value is a plain object, It will be considered as an advanced configuration for tooltip.

Configuration details as belows:

• If a binding value is not specified for v-autotooltip, the innerText of the referenced element will be displayed as the content of the tooltip.
• Only when there is a text overflow will the display of tooltip be activated, and add a truncation effect to the text display.