鼠标悬停在元素上时显示信息的弹窗。

用法

在 Tooltip 的默认插槽中使用 Button 或其他任何组件。

确保使用 App 组件包裹你的应用,该组件使用了TooltipProvider来自 Reka UI 的组件。
你可以查看 App 组件的 tooltip 属性,了解如何全局配置 Tooltip。

文本

使用 text 属性设置 Tooltip 的内容。

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

快捷键

使用 kbds 属性在 Tooltip 中渲染 Kbd 组件。

<template>
  <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
你可以使用特殊按键,如 meta,在 macOS 上显示为 ,在其他平台上显示为 Ctrl

延迟

使用 delay-duration 属性更改 Tooltip 显示前的延迟。例如,将其设置为 0 可以使其立即出现。

<template>
  <UTooltip :delay-duration="0" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
这可以通过 App 组件中的 tooltip.delayDuration 选项进行全局配置。

内容

使用 content 属性控制 Tooltip 内容的渲染方式,例如其 alignside

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

箭头

使用 arrow 属性在 Tooltip 上显示一个箭头。

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

禁用

使用 disabled 属性禁用 Tooltip。

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

示例

控制打开状态

你可以使用 default-open 属性或 v-model:open 指令控制打开状态。

<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>
在此示例中,利用 defineShortcuts,你可以通过按 O 键切换 Tooltip。

API

属性

属性默认值类型
text

string

Tooltip 的文本内容。

kbds

(string | undefined)[] | KbdProps[]

在 Tooltip 中显示的键盘按键。

content

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

TooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>

Tooltip 的内容。

arrow

false

boolean | TooltipArrowProps

在工具提示旁边显示箭头。

portal

true

string | false | true | HTMLElement

在 portal 中渲染工具提示。

defaultOpen

boolean

工具提示首次渲染时的打开状态。当你不需要控制其打开状态时使用。

open

boolean

工具提示的受控打开状态。

delayDuration

700

number

覆盖提供给 Provider 的持续时间,以自定义特定工具提示的打开延迟。

disableHoverableContent

boolean

阻止 Tooltip.Content 在悬停时保持打开。禁用此选项会影响可访问性。继承自 Tooltip.Provider。

disableClosingTrigger

false

boolean

当为 true 时,点击触发器不会关闭内容。

disabled

false

boolean

当为 true 时,禁用工具提示

ignoreNonKeyboardFocus

false

boolean

如果焦点不是来自键盘,则阻止工具提示打开,通过匹配 :focus-visible 选择器实现。这在切换浏览器标签页或关闭对话框时很有用,可以避免工具提示意外打开。

ui

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

插槽

插槽类型
default

{ open: boolean; }

content

{}

事件

事件类型
update:open

[value: boolean]

主题

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 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 before:content-['·'] 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 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 before:content-['·'] 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 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 before:content-['·'] before:me-0.5",
            kbdsSize: 'sm'
          }
        }
      }
    })
  ]
})