vue-easy-tooltip
Vue.js tooltip component
4,788
1
| Install | |
|---|---|
npm install vue-easy-tooltip |
|
| Latest Version: | 1.0.3 |
| Vue: | 2 |
| License: | MIT |
| Last Updated: | Sep 11, 2021 |
| Links: | GitHub · npm |
Maintainer: b13oleksandr
vue-easy-tooltip
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 |
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.3 | ^2.6.11 | MIT | |
| 1.0.2 | ^2.6.11 | MIT | |
| 1.0.0 | ^2.6.11 | MIT | |
| 0.0.5 | ^2.6.11 | MIT | |
| 0.0.4 | ^2.6.11 | MIT | |
| 0.0.3 | ^2.6.11 | MIT | |
| 0.0.2 | ^2.6.11 | MIT | |
| 0.0.1 | ^2.6.11 | MIT |