用法
在 Tooltip 的默认插槽中使用 Button 或任何其他组件。
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
属性或 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
属性
属性 | 默认值 | 类型 |
---|---|---|
文本 |
工具提示的文本内容。 | |
键盘按键 |
在工具提示中显示的键盘按键。
| |
内容 |
|
Tooltip 的内容。
|
arrow |
|
在工具提示旁边显示一个箭头。 |
portal |
|
在传送门中渲染工具提示。 |
reference |
用于定位的引用(或锚点)元素。 如果未提供,将使用当前组件作为锚点。
| |
defaultOpen |
工具提示在初始渲染时的打开状态。当您不需要控制其打开状态时使用。 | |
open |
工具提示的受控打开状态。 | |
delayDuration |
|
覆盖提供给 |
disableHoverableContent |
阻止 Tooltip.Content 在悬停时保持打开状态。禁用此功能会影响可访问性。继承自 Tooltip.Provider。 | |
disableClosingTrigger |
|
当为 |
disabled |
|
当为 |
ignoreNonKeyboardFocus |
|
如果焦点不是来自键盘,则通过匹配 |
ui |
|
插槽
插槽 | 类型 |
---|---|
default |
|
内容 |
|
事件
事件 | 类型 |
---|---|
update:open |
|
主题
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'
}
}
}
})
]
})
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'
}
}
}
})
]
})