v-tooltip

v-tooltip is a Vue.js directive which provides simple and customizable tooltips. Tooltips are small text boxes that display information when a user hovers over an element.

Installation

To use v-tooltip in your Vue.js project, you can install it via npm:

npm install v-tooltip

Then, you can import the directive in your Vue component:

import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

Usage

After importing v-tooltip, you can use the v-tooltip directive in your Vue templates. The simplest usage is to add the v-tooltip directive to an HTML element with the desired tooltip text as the directive value:

<span v-tooltip="'This is a tooltip'">Hover over me</span>

By default, the tooltip will appear on hover over the element. You can also customize the trigger behavior and positioning of the tooltip by passing an object as the directive value:

<span v-tooltip="{ content: 'This tooltip appears on click', trigger: 'click', placement: 'right' }">Click me to see a tooltip</span>

Customization

v-tooltip provides a variety of options for customizing the appearance and behavior of tooltips. Here are some examples:

Delay

You can add a delay before the tooltip appears by adding the delay option to the object passed as the directive value:

<span v-tooltip="{ content: 'This tooltip appears after a 1.5s delay', delay: { show: 1500 } }">Hover over me with a delay</span>

HTML Content

By default, v-tooltip only accepts text for tooltip content. However, you can enable HTML content by setting the html option to true.

<span v-tooltip="{ content: '<strong>This</strong> is <em>HTML</em> tooltip content', html: true }">Hover over me for HTML content</span>

Theme

v-tooltip provides a default theme, but you can customize the style of the tooltip by providing CSS rules in your project's CSS. You can also specify different theme classes for different tooltips by adding the theme option:

<span v-tooltip="{ content: 'This tooltip has a custom theme', theme: 'my-custom-theme' }">Hover over me for a custom theme</span>

/* Define a custom theme */
.my-custom-theme .tooltip {
  background-color: #f5f5f5;
  color: #000;
  font-size: 14px;
  border: 1px solid #000;
}

Vue Components as Content

You can use Vue components as tooltip content by using a slot instead of the content option:

<template>
  <span v-tooltip="{ slot: 'tooltip' }">Hover over me for a Vue component tooltip</span>

  <tooltip>
    <p>This is a Vue component tooltip!</p>
  </tooltip>
</template>

<script>
export default {
  components: {
    Tooltip: {
      template: '<div><slot name="tooltip"></slot></div>'
    }
  }
}
</script>

This example uses a Vue component called Tooltip to wrap the content of the tooltip. The component has a named slot called tooltip which is rendered inside the v-tooltip directive. This allows us to use Vue components as tooltip content.