--- layout: default ---
install the script like so:
You can either get the raw css clicking here
or import the css from node_modules (in case of webpack, the ~
represents the node_modules folder):
or the scss directly:
When using ES5, don't forget to copy the css.
raw css: download
Default values
If you have a need to change certain default value(s) for all tooltips:
Example: Tooltip
Please be careful of the single quotes inside the double quote.
Example: Tooltip
Example: the target is an html element
5 different positions are available: auto (default) | bottom | top | left | right
Default positioning: auto tooltip
Bottom positioning: bottom tooltip
Top positioning: top tooltip
Left positioning: left tooltip
Right positioning: right tooltip
All above positions have 2 extra variants that you can use: start | end
Bottom Start positioning: tooltip
Bottom End positioning: tooltip
default: { delay: 200 }
Example: Delayed Tooltip
default: { offset: 5 }
Example: Offset Tooltip
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
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
Let's personalize a bit this tooltip!
Wants some red? Here is how you do it.
Example: tooltip appearance
Full example on codepen: https://codepen.io/hekigan/pen/oebpPm
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)