Installation
Using Webpack, Rollup, etc...
1. using npm or yarn
install the script like so:
2. use the script with Vue
3. do not forget the css if you do not want to use the above import!
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:
Using script tag
When using ES5, don't forget to copy the css.
raw css: download
Change global default values
Default values
If you have a need to change certain default value(s) for all tooltips:
Usage
Basic
Example: Tooltip
Please be careful of the single quotes inside the double quote.
Using an options object
Example: Tooltip
Referencing an HTML element
Example: the target is an html element
Positioning
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
Positioning - Variants
All above positions have 2 extra variants that you can use: start | end
Bottom Start positioning: tooltip
Bottom End positioning: tooltip
Delay
default: { delay: 200 }
Example: Delayed Tooltip
Offset
default: { offset: 5 }
Example: Offset 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
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)