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