Tooltip - Nuxt UI

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

any

undefined

text

string

null

popper

{}

{}

openDelay

number

0

closeDelay

number

0

shortcuts

string[]

[]

prevent

boolean

false

Config

UTooltip.vue

{  "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",  "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": "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"  }}

Popover

Display a non-modal dialog that floats around a trigger element.

ContextMenu

Display a menu that appears on right click.