Tooltip

Tooltip GitHub

当鼠标悬停在元素上时，弹出一个显示信息的浮层。

用法

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

请确保使用 App 组件包裹你的应用，该组件使用了TooltipProvider组件，来自 Reka UI。

你可以查看 App 组件的 tooltip prop 属性，了解如何全局配置 Tooltip。

文本

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

text

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

Kbds

使用 kbds prop 属性在 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 prop 属性来更改 Tooltip 显示之前的延迟。例如，你可以将其设置为 0 以使其立即显示。

delayDuration

<template>
  <UTooltip :delay-duration="0" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

这可以通过 App 组件中的 tooltip.delayDuration 选项进行全局配置。

内容

使用 content prop 属性来控制 Tooltip 内容的渲染方式，例如它的 align 或 side 等。

content.align

content.side

content.sideOffset

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

箭头

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

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

禁用

使用 disabled prop 属性来禁用 Tooltip。

disabled

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

API

Props

Prop	默认值	类型
`text`		`string` Tooltip 的文本内容。
`kbds`		`(string \| undefined)[] \| KbdProps[]` 要在 Tooltip 中显示的键盘按键。
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }`	`TooltipContentProps` Tooltip 的内容。
`arrow`	`false`	`boolean \| TooltipArrowProps` 在 Tooltip 旁边显示箭头。
`portal`	`true`	`boolean` 在 portal 中渲染 Tooltip。
`defaultOpen`		`boolean` Tooltip 初始渲染时的打开状态。当你不需要控制其打开状态时使用。
`open`		`boolean` Tooltip 的受控打开状态。
`delayDuration`	`700`	`number` 覆盖赋予 `Provider` 的持续时间，以自定义特定 Tooltip 的打开延迟。
`disableHoverableContent`		`boolean` 阻止 Tooltip.Content 在悬停时保持打开状态。禁用此功能会产生可访问性后果。继承自 Tooltip.Provider。
`disableClosingTrigger`	`false`	`boolean` 当 `true` 时，单击触发器不会关闭内容。
`disabled`	`false`	`boolean` 当 `true` 时，禁用 tooltip
`ignoreNonKeyboardFocus`	`false`	`boolean` 如果焦点不是来自键盘，通过匹配 `:focus-visible` 选择器，阻止 Tooltip 打开。当你想避免在切换浏览器标签页或关闭对话框时打开它时，这很有用。
`ui`		`Partial<{ content: string; arrow: string; text: string; kbds: string; kbdsSize: string; }>`

插槽

插槽	类型
`default`	`{ open: boolean; }`
`content`	`{}`

事件

事件	类型
`update:open`	`[value: boolean]`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    tooltip: {
      slots: {
        content: 'flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) 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] pointer-events-auto',
        arrow: 'fill-(--ui-border)',
        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-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) 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] pointer-events-auto',
            arrow: 'fill-(--ui-border)',
            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-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) 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] pointer-events-auto',
            arrow: 'fill-(--ui-border)',
            text: 'truncate',
            kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
            kbdsSize: 'sm'
          }
        }
      }
    })
  ]
})

Toast

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

Tree

一个树形视图组件，用于显示和交互分层数据结构。