用法
在 Tooltip 的默认插槽中使用 Button 或任何其他组件。
<template>
<UTooltip text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
App 组件中，该组件使用了TooltipProvider组件（来自 Reka UI）。文本
使用 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。跟随光标
当鼠标悬停在元素上时，你可以使用reference属性让 Tooltip 跟随光标。
<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: PointerEvent) => {
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>>Tooltip 的内容。
|
arrow | false | boolean | TooltipArrowProps在 Tooltip 旁边显示一个箭头。 |
portal | true | string | false | true | HTMLElement在传送门 (portal) 中渲染 Tooltip。
|
reference | Element | VirtualElement用于定位的引用（或锚点）元素。 如果未提供，将使用当前组件作为锚点。
| |
defaultOpen | boolean工具提示在初始渲染时的打开状态。当您不需要控制其打开状态时使用。 | |
open | boolean工具提示的受控打开状态。 | |
delayDuration | 700 | number覆盖传递给 |
disableHoverableContent | boolean阻止 Tooltip.Content 在悬停时保持打开状态。禁用此功能会影响可访问性。继承自 Tooltip.Provider。 | |
disableClosingTrigger | false | boolean当为 |
disabled | false | boolean当为 |
ignoreNonKeyboardFocus | false | boolean通过匹配 |
ui | { content?: ClassNameValue; arrow?: ClassNameValue; text?: ClassNameValue; kbds?: ClassNameValue; kbdsSize?: ClassNameValue; } |
插槽
| 插槽 | 类型 |
|---|---|
default | { open: boolean; } |
内容 | { ui: object; } |
事件
| 事件 | 类型 |
|---|---|
update:open | [value: boolean] |
主题
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'
}
}
}
})
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'
}
}
}
})
]
})