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.

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

Props

ui

Type: {} (See Config for type definition)

text

Type: stringDefault: null

popper

Type: PopperOptions

Property	Type	Default
placement	'left' | 'right' | 'bottom-end' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'right-start' | 'right-end' | 'left-start' | 'left-end'	'bottom'
strategy	'fixed' | 'absolute'	'fixed'
arrow	boolean	false
offsetDistance	number	0
offsetSkid	number	0
overflowPadding	number	0
gpuAcceleration	boolean	true
adaptive	boolean	true
scroll	boolean	true
resize	boolean	true
locked	boolean	false

shortcuts

Type: string[]Default: []

openDelay

Type: numberDefault: config.default.openDelay

closeDelay

Type: numberDefault: config.default.closeDelay

prevent

Type: booleanDefault: 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'
  },
  default: {
    openDelay: 0,
    closeDelay: 0
  },
  arrow: {
    base: '[@media(pointer:coarse)]:hidden 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"
  }
}