Tooltip Directive

Tooltip can be added to anything using directive v-tooltip that accepts a string for tooltip text. See installation instructions on the Directives Page.

Demo

Use the v-tooltip directive to pass an object, containing text of tooltip, container in witch it will be created and optionally variant property that sets style, to your element. container is body by default. variant is normal by default.

<template>
  <div v-tooltip="tooltip">
      Hover For Tooltip
  </div>
</template>
<script>
export default {
  data() {
    return {
      tooltip: {
        text: 'Tooltip text',
        container: '#app',
        variant: 'dark'
      }
    };
  },
}
</script>