vue-autotooltip

Auto tooltip for Vue.js

Features

• Autotooltip directive.

Version	Support Vue Version	Status
v1.x	v2.7.x	✔️
-	v3.2.x	🚧

Installation

# pnpm
$ pnpm add vue-autotooltip

# yarn
$ yarn add vue-autotooltip

# npm
$ npm i vue-autotooltip

Usage

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>

Binding Value

Has binding value

• 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:

Key	Type	Default Value	Description
content	string	undefined	Content of tooltip.
effect	dark / light	dark	Tooltip theme.
placement	string	top	Position of Tooltip.
appendTo	string / HTMLElement	document.body	Where to insert the tooltip element.
arrowWidth	number	8	Specify the arrow width of tooltip.
showArrow	boolean	true	Specify whether to display arrows.

Has not binding value

• 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.