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>

Popper

Use the popper prop to customize the popper instance.

Arrow

<template>
  <UTooltip text="Tooltip example" :shortcuts="['', 'O']" :popper="{ arrow: true }">
    <UButton color="gray" label="Hover me" />
  </UTooltip>
</template>

Placement

<template>
  <UTooltip text="Tooltip example" :shortcuts="['', 'O']" :popper="{ placement: 'right' }">
    <UButton color="gray" label="Hover me" />
  </UTooltip>
</template>

Offset

<template>
  <UTooltip text="Tooltip example" :shortcuts="['', 'O']" :popper="{ offsetDistance: 16 }">
    <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
{}
{}
text
string
null
popper
PopperOptions
{}
openDelay
number
0
closeDelay
number
0
shortcuts
string[]
[]
prevent
boolean
false

Config

{
  "wrapper": "relative inline-flex",
  "container": "z-20 group",
  "width": "max-w-xs",
  "background": "bg-white dark:bg-gray-900",
  "color": "text-gray-900 dark:text-white",
  "shadow": "shadow",
  "rounded": "rounded",
  "ring": "ring-1 ring-gray-200 dark:ring-gray-800",
  "base": "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative",
  "shortcuts": "hidden md:inline-flex flex-shrink-0 gap-0.5",
  "middot": "mx-1 text-gray-700 dark:text-gray-200",
  "transition": {
    "enterActiveClass": "transition ease-out duration-200",
    "enterFromClass": "opacity-0 translate-y-1",
    "enterToClass": "opacity-100 translate-y-0",
    "leaveActiveClass": "transition ease-in duration-150",
    "leaveFromClass": "opacity-100 translate-y-0",
    "leaveToClass": "opacity-0 translate-y-1"
  },
  "popper": {
    "strategy": "fixed"
  },
  "arrow": {
    "base": "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2",
    "ring": "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
    "rounded": "before:rounded-sm",
    "background": "before:bg-gray-200 dark:before:bg-gray-800",
    "shadow": "before:shadow",
    "placement": "group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1"
  }
}