Tooltip

You can use the v-tooltip directive to add a tooltip to an element.

Basic usage

Source code

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import { vTooltip } from '@/directives/tooltip.ts';
</script>

<template>
  <AcvButton
    v-tooltip="'This is a tooltip'"
  >
    Directive tooltip
  </AcvButton>
</template>

Placement modifiers

You can specify tooltip placement as a modifier.

Object notation

You can specify tooltip placement as an object.

In this object, you can put any component props plus the additional options below.

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import { vTooltip } from '@/directives/tooltip.ts';
</script>

<template>
  <AcvButton
    v-tooltip="{
      placement: 'right',
      content: 'This is a tooltip',
    }"
  >
    Hover me
  </AcvButton>
</template>

Async content

The content option accepts a function that returns a promise:

<button v-tooltip="{
    content: asyncContent,
    loadingContent: 'Loading...'
}"
>
Hover me
</button>