Usage

With Webpack, Rollup, etc...

// in your js file
import Vue from 'vue';
import Tooltip from 'vue-directive-tooltip';
// or require('vue-directive-tooltip');
import App from './App.vue';
                    

With tag directly in the page

<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>
                    

Positioning

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'"...

Options

Content

Simple way to set text <span v-tooltip="'simple way'"...

"Option" way to set text <span v-tooltip="{ content: 'option way' }"...

Visibility

In case you need to hide a tooltip, you can use the visible option

<span v-tooltip="{ content: 'change the visibility', visible: }"...

hide show tooltip

Custom CSS classes

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"] [x-arrow] {
    border-top-color: red;
}

.vue-tooltip.tooltip-custom[x-placement^="bottom"] [x-arrow] {
    border-bottom-color: red;
}

.vue-tooltip.tooltip-custom[x-placement^="left"] [x-arrow] {
    border-left-color: red;
}

.vue-tooltip.tooltip-custom[x-placement^="right"] [x-arrow] {
    border-right-color: red;
}