Easy tooltips with Tooltip.js
npm install --save v-tooltip
Install the plugin into Vue:
import Vue from 'vue' import VTooltip from 'v-tooltip' Vue.use(VTooltip)
Or use the directive directly:
import Vue from 'vue' import { VTooltip } from 'v-tooltip' Vue.directive('tooltip', VTooltip)
Include popper.js & tooltip.js with v-tooltip in the page.
Install the plugin into Vue:
Vue.use(VTooltip)
Or use the directive directly:
Vue.directive('tooltip', VTooltip.VTooltip)
In the template, use the v-tooltip directive:
<button v-tooltip="'You have ' + count + ' new messages.'">
Of course, you can use a reactive property:
<button v-tooltip="tooltipContent">
You can specify the tooltip position as a modifier:
<button v-tooltip.bottom-left="'You have ' + count + ' new messages.'">
The available positions are:
'top''top-start''top-end''right''right-start''right-end''bottom''bottom-start''bottom-end''left''left-start''left-end'
You can use an object instead of a simple string:
<button v-tooltip="{ content: 'You have ' + count + ' new messages.' }">
You can set the tooltip css classes dynamically with the object notation:
<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: ['a', 'b'] }">
This will replace the default CSS classe with 'a b' on the tooltip element.
You can also use the standard class notation:
<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: 'a b' }">
Or a reactive property:
<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: tooltipClasses }">
<button v-tooltip="options">
content- HTML text to be displayed in the tooltipclasses- (see above)delay- Show/Hide delay (ms)placement- (see above)trigger- Events triggering the tooltip separated with spaces:'hover','click','focus'or'manual'('manual'can't be combined with any other event)offset- Offset of the position (px)container- Selector: Container where the tooltip will be appended (e.g.'body')
The default global options are:
{ // Default tooltip placement relative to target element defaultPlacement: 'top', // Default CSS classes applied to the tooltip element defaultClass: 'vue-tooltip-theme', // Default HTML template of the tooltip element // It must include `tooltip` & `tooltip-inner` CSS classes defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>', // Delay (ms) defaultDelay: 0, // Default events that trigger the tooltip defaultTrigger: 'hover focus', // Default position offset (px) defaultOffset: 0, // Default container where the tooltip will be appended defaultContainer: 'body', }
You can change the options during install with the arguments:
Vue.use(VTooltip, options)
Or directly on the directive definition:
// Set custom CSS class VTooltip.options.defaultClass = 'my-tooltip'
On mobile, you can disable the tooltips with the VTooltip.enabled property:
VTooltip.enabled = window.innerWidth > 768
.tooltip { display: block !important; padding: 4px; z-index: 10000; .tooltip-inner { background: black; color: white; border-radius: 16px; padding: 5px 10px 4px; } .tooltip-arrow{ display: none; } &[aria-hidden='true'] { visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; } &[aria-hidden='false'] { visibility: visible; opacity: 1; transition: opacity .15s; } }
.tooltip { display: block !important; padding: 4px; z-index: 10000; } .tooltip .tooltip-inner { background: black; color: white; border-radius: 16px; padding: 5px 10px 4px; } .tooltip tooltip-arrow{ display: none; } .tooltip[aria-hidden='true'] { visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; } .tooltip[aria-hidden='false'] { visibility: visible; opacity: 1; transition: opacity .15s; }
LICENCE ISC - Created by Guillaume CHAU (@Akryum)