overlays

Tooltip

Display content that appears on hover next to an element.

Usage

<template>
  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
    <UButton color="gray" label="Hover me" />
  </UTooltip>
</template>

Slots

text

Use the #text slot to override the content of the text.

Hover
<UTooltip>
  <template #text>
    <span class="italic">Hello World!</span>
  </template>
</UTooltip>

Props

ui
any

undefined

text
string

null

popper
{}

{}

openDelay
number

0

closeDelay
number

0

shortcuts
string[]

[]

prevent
boolean

false

Preset

appConfig.ui.tooltip
undefined