Installation
Using Webpack, Rollup, etc...
Vue.use()
is called from the script, so you don't need to care about it.
Using script tag
When using ES5, don't forget to copy the css.
Usage
Basic
Example: Tooltip
Please be careful of the single quotes inside the double quote.
Using an options object
Example: Tooltip
Referencing and HTML element
Example: the target is an html element
Positioning
4 different positions are available: bottom (default) | top | left | right
Default positioning: bottom tooltip
Top positioning: top tooltip
Left positioning: left tooltip
Right positioning: right tooltip
Events / Triggers
There are several options to trigger the display of the tooltip:
you can use a combination of these keywords: click | hover | focus
single event: click trigger
or even a combination: hover.focus triggers together
By the default, the click
trigger will close when clicking anywhere on the page.
In case you want the tooltip to close when clicking again on the same element, there is an extra option.
click event: click + manual trigger
Programmatic
If you do not want to use triggers and manage the tooltip visibility through Vue, you can!
For that, you need to use the modifier .notrigger
+ the options object attribute visible
<a v-tooltip.notrigger="{ content: '...', visible: visibility }"
change the visibility with the button below
Custom css / class
Let's personalize a bit this tooltip!
Wants some red? Here is how you do it.
Example: tooltip appearance
1. add somewhere in your css file the classes that you want to use.
Let's say... .tooltip-custom
We have to account for the arrow color also depending on the tooltip's position.
2. in your directive options object, specify your css class name(s)