Tooltip

TooltipGitHub
一个在悬停在元素上时显示信息的弹出框。

用法

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

<template>
  <UTooltip text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
请确保使用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 内容的渲染方式，例如它的align或side。

<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 prop 或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。

跟随光标

您可以使用以下方法在悬停在元素上时使 Tooltip 跟随光标reference属性

悬停我
<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

属性

属性默认值类型
文本string

工具提示的文本内容。

键盘按键(string | undefined)[] | KbdProps[]

在工具提示中显示的键盘按键。

内容{ 侧面: '底部', 侧面偏移量: 8, 碰撞填充: 8 }TooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>

工具提示的内容。

arrowfalseboolean | TooltipArrowProps

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

portaltruestring | false | true | HTMLElement

在门户中渲染工具提示。

referenceElement | VirtualElement

用于定位的引用（或锚点）元素。

如果未提供，将使用当前组件作为锚点。

defaultOpenboolean

工具提示在初始渲染时的打开状态。当您不需要控制其打开状态时使用。

openboolean

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

delayDuration700number

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

disableHoverableContentboolean

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

disableClosingTriggerfalseboolean

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

disabledfalseboolean

当true时，禁用工具提示

ignoreNonKeyboardFocusfalseboolean

通过与:focus-visible选择器匹配，防止当焦点不是来自键盘时工具提示打开。当您想避免在切换浏览器标签页或关闭对话框时打开它时，这很有用。

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

插槽

插槽类型
default{ open: boolean; }
内容{ ui: object; }

事件

事件类型
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.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'
          }
        }
      }
    })
  ]
})

更新日志

dd81d— feat: 添加 data-slot 属性 (#5447)

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

5cb65— 特性：导入 @nuxt/ui-pro 组件

5e39c— fix: 仅当存在text或kbds时才渲染 (#4568)

b00e0— feat: 添加reference属性

69a7b— feat: 添加reference属性

29fa4— 特性：添加全局 portal 属性 (#3688)

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

5dec0— feat: 处理 content 属性中的事件

Toast

提供信息或反馈给用户的简洁消息。

AuthForm

可自定义的表单，用于创建登录、注册或密码重置表单。