Tooltip

TooltipGitHub
A popup that reveals information when hovering over an element.

Usage

Use a Button or any other component in the default slot of the Tooltip.

Make sure to wrap your app with the App component which uses the TooltipProvider component from Reka UI.
You can check the App component tooltip prop to see how to configure the Tooltip globally.

Text

Use the text prop to set the content of the Tooltip.

<template>
  <UTooltip text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Kbds

Use the kbds prop to render Kbd components in the Tooltip.

<template>
  <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
You can use special keys like meta that displays as ⌘ on macOS and Ctrl on other platforms.

Delay

Use the delay-duration prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to 0.

<template>
  <UTooltip :delay-duration="0" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
This can be configured globally through the tooltip.delayDuration option in the App component.

Content

Use the content prop to control how the Tooltip content is rendered, like its align or side for example.

<template>
  <UTooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="Open on GitHub"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Arrow

Use the arrow prop to display an arrow on the Tooltip.

<template>
  <UTooltip arrow text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Disabled

Use the disabled prop to disable the Tooltip.

<template>
  <UTooltip disabled text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UTooltip v-model:open="open" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
In this example, leveraging defineShortcuts, you can toggle the Tooltip by pressing O.

With following cursor New

You can make the Tooltip follow the cursor when hovering over an element using the reference prop:

Hover me 
<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <UTooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </UTooltip>
</template>

API

Props

Prop Default Type
text

string

The text content of the tooltip.

kbds

(string | undefined)[] | KbdProps[]

The keyboard keys to display in the tooltip.

content

{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }

TooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>

The content of the tooltip.

arrow

false

boolean | TooltipArrowProps

Display an arrow alongside the tooltip.

portal

true

string | false | true | HTMLElement

Render the tooltip in a portal.

reference

Element | VirtualElement

The reference (or anchor) element that is being referred to for positioning.

If not provided will use the current component as anchor.

defaultOpen

boolean

The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the tooltip.

delayDuration

700

number

Override the duration given to the Provider to customise the open delay for a specific tooltip.

disableHoverableContent

boolean

Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.

disableClosingTrigger

false

boolean

When true, clicking on trigger will not close the content.

disabled

false

boolean

When true, disable tooltip

ignoreNonKeyboardFocus

false

boolean

Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the :focus-visible selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.

ui

{ content?: ClassNameValue; arrow?: ClassNameValue; text?: ClassNameValue; kbds?: ClassNameValue; kbdsSize?: ClassNameValue; }

Slots

Slot Type
default

{ open: boolean; }

content

{}

Emits

Event Type
update:open

[value: boolean]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    tooltip: {
      slots: {
        content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
        arrow: 'fill-default',
        text: 'truncate',
        kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
        kbdsSize: 'sm'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        tooltip: {
          slots: {
            content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
            arrow: 'fill-default',
            text: 'truncate',
            kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
            kbdsSize: 'sm'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        tooltip: {
          slots: {
            content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
            arrow: 'fill-default',
            text: 'truncate',
            kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
            kbdsSize: 'sm'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Toast

A succinct message to provide information or feedback to the user.

Tree

A tree view component to display and interact with hierarchical data structures.