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

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

Related Packages

vue-directive-tooltip

Vue.js tooltip directive

272,883 169
vue-tooltip

A plugin to implement tooltip using Vue.js

2,805 14
v-tooltip

Easy tooltips with Vue 2.x

6,036,683 3,460
vtip

A simple tooltip based Vue

7,249
@gits-id/tooltip

GITS Tooltip Component

4,074

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