vue-easy-tooltip
Demo
Installation
yarn add vue-easy-tooltip
npm i vue-easy-tooltip
Base usage
<template>
<button>
Hover me
<vue-easy-tooltip>
I am a tooltip
</vue-easy-tooltip>
</button>
</template>
<script>
import VueEasyTooltip from "vue-easy-tooltip"
components: {
VueEasyTooltip
}
</script>
With v-model
<template>
<button @click="tooltip = !tooltip">
Click me
<vue-easy-tooltip v-model="tooltip">
I am a tooltip
</vue-easy-tooltip>
</button>
</template>
<script>
import VueEasyTooltip from "vue-easy-tooltip"
components: {
VueEasyTooltip
},
data: () => ({
tooltip: false
})
</script>
Props
Name |
Type |
Default |
Description |
offset |
Number |
12 |
Number to offset the tooltip vertically in pixels |
withArrow |
Boolean |
false |
Show tooltip arrow |
position |
String |
bottom |
Position of the tooltip relative to its target. Accepted values: top , bottom |
backgroundColor |
String |
#505050 |
Color tooltip background |
classes |
String |
'' |
CSS classes for the tooltip |
styles |
Object |
{} |
Object with CSS properties and values for styling the tooltip |
Slots
Name |
Description |
default |
Used for pass the content |