Tooltip

Tooltip options reference

placement'bottom'
String
Position of the tooltip. Valid values are the same as placement values in FloatingUI
autoPlacementfalse
Boolean
Calculates best placement for tooltip based on available space.
fliptrue
Boolean
Changes the placement of the tooltip in order to keep it in view
delay50
Number
Delay before showing and hiding tooltip
offsetX0
Number
Offset of tooltip element relative to bound element.
offsetY0
Number
Offset of tooltip element relative to bound element.
transitionfade
String
Use animation when showing or hiding tooltip. Valid values are: 'fade', 'scale-fade' or empty string
textundefined
StringFunction
Defines text to display inside tooltip. If text is undefined then data-title attribute of reference element is used as content for tooltip

Usage

To show tooltip when hovering over html element use the v-tooltip directive. There are three possible ways to set directive value: string, function or object :

<button v-tooltip="'Tooltip text'">Button</button>

<button v-tooltip="() => 'Tooltip text'">Button</button>

<button v-tooltip="{ text: 'Tooltip text' }">Button</button>

If value is an object additional options can be set:

<button v-tooltip="{ 
  placement: string,
  offsetX: number,
  offsetY: number,
  flip: boolean,
  delay: number,
  autoPlacement: boolean,
  transition: string,
  inline: boolean,
  text: string | function | undefined,
}">
  Button
</button>

For undefined text property content of data-title attribute will be used.

Examples

Default tooltip:

    <template>
  <v-button v-tooltip="{ offsetY: 5, text: 'This is tooltip' }">
    Hover me
  </v-button>
</template>

Tooltip placement:

    <template>
  <div class="flex flex-col md:flex-row gap-y-4 md:gap-x-4">
    <v-button
      v-tooltip="{
        offsetY: 5,
        placement: 'top',
        text: 'This is tooltip on the top',
      }"
    >
      Hover me (tooltip on top)
    </v-button>
    
    <v-button
      v-tooltip="{
        offsetY: 5,
        placement: 'right',
        text: 'This is tooltip on the right',
      }"
    >
      Hover me (tooltip on right)
    </v-button>
    
    <v-button
      v-tooltip="{
        offsetY: 5,
        autoPlacement: true,
        flip: false,
        text: 'This is auto placed tooltip',
      }"
    >
      Hover me (automatic placement)
    </v-button>
  </div>
</template>

Tooltip delay:

    <template>
  <div class="flex flex-col md:flex-row gap-y-4 md:gap-x-4">
    <v-button
      v-tooltip="{ offsetY: 5, delay: 500, text: 'This is delayed tooltip' }"
    >
      Hover me (long delay)
    </v-button>

    <v-button
      v-tooltip="{
        offsetY: 5,
        delay: 0,
        text: 'This tooltip apears instantaneously',
      }"
    >
      Hover me (no delay)
    </v-button>
  </div>
</template>

Tooltip content source:

    <template>
  <div class="flex flex-col md:flex-row gap-y-4 md:gap-x-4">
    <v-button
      v-tooltip="{
        offsetY: 5,
        text: () => 'Dynamic content ' + (Math.random() * 100).toFixed(0),
      }"
    >
      Hover me (dynamic content)
    </v-button>

    <v-button
      v-tooltip="{ offsetY: 5 }"
      data-title="This tooltip has content from data-title attribute"
    >
      Hover me (data title attribute)
    </v-button>
  </div>
</template>

Tooltip animation:

    <template>
  <div class="flex flex-col md:flex-row gap-y-4 md:gap-x-4">
    <v-button
      v-tooltip="{
        offsetY: 5,
        transition: 'fade',
        text: 'This is fade tooltip',
      }"
    >
      Hover me (fade)
    </v-button>

    <v-button
      v-tooltip="{
        offsetY: 5,
        transition: 'scale-fade',
        text: 'This is scale-fade tooltip',
      }"
    >
      Hover me (scale-fade)
    </v-button>

    <v-button
      v-tooltip="{ offsetY: 5, transition: '', text: 'This is nofade tooltip' }"
    >
      Hover me (no animation)
    </v-button>
  </div>
</template>