用法
在 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。API
属性
属性 | 默认值 | 类型 |
---|---|---|
text |
Tooltip 的文本内容。 | |
kbds |
在 Tooltip 中显示的键盘按键。
| |
content |
|
Tooltip 的内容。
|
arrow |
|
在工具提示旁边显示箭头。 |
portal |
|
在 portal 中渲染工具提示。 |
defaultOpen |
工具提示首次渲染时的打开状态。当你不需要控制其打开状态时使用。 | |
open |
工具提示的受控打开状态。 | |
delayDuration |
|
覆盖提供给 |
disableHoverableContent |
阻止 Tooltip.Content 在悬停时保持打开。禁用此选项会影响可访问性。继承自 Tooltip.Provider。 | |
disableClosingTrigger |
|
当为 |
disabled |
|
当为 |
ignoreNonKeyboardFocus |
|
如果焦点不是来自键盘,则阻止工具提示打开,通过匹配 |
ui |
|
插槽
插槽 | 类型 |
---|---|
default |
|
content |
|
事件
事件 | 类型 |
---|---|
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 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'
}
}
}
})
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'
}
}
}
})
]
})
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'
}
}
}
})
]
})