// in your js file
import Vue from 'vue';
import Tooltip from 'vue-directive-tooltip';
// or require('vue-directive-tooltip');
import App from './App.vue';
<link rel="stylesheet" href="path/to/css/index.css">
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="path/to/vueDirectiveTooltip.js"></script>
Simple way to set text
<span v-tooltip="'simple way'"...
"Option" way to set text
<span v-tooltip="{ content: 'option way' }"...
to target an html element
<span v-tooltip="{ html: 'id-of-html-content' }"...
// somewhere else in your component
<div id="id-of-html-content">My great content</div>
Default position
<span v-tooltip="'I am on the bottom'"...
Position right
<span v-tooltip.right="'I am on the right'"...
Position top
<span v-tooltip.top="'I am on the top'"...
I need a longer sentence to position left
<span v-tooltip.left="'I am on the left'"...
There are several options to trigger the display of the tooltip:
you can use a combination of these keywords: click, hover, focus
Click to see the text
<span v-tooltip.click="{ content: 'Show on: click' }"...
<span v-tooltip.focus.hover="{ content: 'Show on: focus, hover' }"...
Click to open AND close (here is the tooltip)
<span v-tooltip.click.manual="{ content: 'Show on click' }"...
In case you need to toggle a tooltip's visibility, you can use the visible option
<span v-tooltip="{ content: 'change the visibility', visible: }"...
Toggle visibility AND disable triggers (hover, click, focus) visible option
<span v-tooltip.notrigger="{ content: 'change the visibility', visible: }"...
To change the offset of the tooltip relative to it's element: offset by 10px option
<span v-tooltip="{ content: 'let\'s offset this', offset: 10 }"...
Add your custom CSS classes to change the tooltip appearance
<span v-tooltip="{ content: 'custom class', class: 'tooltip-custom tooltip-other-custom' }"...
CSS
.vue-tooltip.tooltip-custom {
background-color: red;
}
.vue-tooltip.tooltip-custom[x-placement^="top"] .tooltip-arrow {
border-top-color: red;
}
.vue-tooltip.tooltip-custom[x-placement^="bottom"] .tooltip-arrow {
border-bottom-color: red;
}
.vue-tooltip.tooltip-custom[x-placement^="left"] .tooltip-arrow {
border-left-color: red;
}
.vue-tooltip.tooltip-custom[x-placement^="right"] .tooltip-arrow {
border-right-color: red;
}
Let's use some HTML in this tooltip