用于悬停提示场景的 MoriUI 组件。

导入

import { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from 'moriui'

示例

概览

保存按钮的提示文本。

<script setup lang="ts">
  import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'moriui'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button variant="outline">
          悬停
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>添加到收藏夹</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

定位

使用 side 控制提示出现的方位。

<script setup lang="ts">
  import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'moriui'

  const sides = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <TooltipProvider>
    <div class="flex flex-wrap gap-2">
      <Tooltip v-for="side in sides" :key="side">
        <TooltipTrigger as-child>
          <Button variant="outline" class="w-fit capitalize">
            {{ side }}
          </Button>
        </TooltipTrigger>
        <TooltipContent :side="side">
          <p>添加到收藏夹</p>
        </TooltipContent>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>

禁用

禁用按钮仍然触发提示。

<script setup lang="ts">
  import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'moriui'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <span tabindex="0">
          <Button disabled variant="outline">不能点击</Button>
        </span>
      </TooltipTrigger>
      <TooltipContent>
        <p>此功能暂不可用</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

键盘

键盘焦点也能触发工具提示。

<script setup lang="ts">
  import {
    Button,
    Kbd,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
  } from 'moriui'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button variant="outline">
          收藏
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <div class="flex items-center gap-2">
          <span>收藏</span>
          <Kbd>⌘B</Kbd>
        </div>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

RTL

从右到左的提示布局。

<script setup lang="ts">
  import {
    Button,
    DirectionProvider,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger as-child>
          <Button variant="outline">
            تلميح
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>إضافة إلى المفضلة</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </DirectionProvider>
</template>

使用说明

组合方式

Tooltip 由 Provider、Trigger、Portal、Content 与可选 Arrow 组成；Provider 统一配置组件的打开延迟与关闭行为。

定位

Content 的 side 与 sideOffset 控制提示文本的方向和间距。

禁用状态

TooltipProvider 的 disableHoverableContent 可关闭内容的悬浮保持行为。

键盘

Tooltip 通过焦点触发，支持键盘用户在焦点可见时查看提示。

RTL

方向由 DirectionProvider 控制。

变体

Tooltip 没有公开视觉变体；side 与 sideOffset 来自 Reka Popper 定位属性。

可访问性

Tooltip 复用 Reka UI 的 tooltip 角色，触发元素需要描述性文本；纯图标按钮的 Tooltip 应配合 aria-label。Tooltip 本身不应包含交互元素。

API 参考

属性	类型	默认值	说明
`Tooltip v-model:open`	`boolean`	`undefined`	提示的受控打开状态。
`Tooltip defaultOpen`	`boolean`	`false`	非受控初始打开状态。
`TooltipProvider delayDuration`	`number`	`300`	触发打开前的延迟毫秒数。
`TooltipProvider disableHoverableContent`	`boolean`	`false`	关闭鼠标悬浮在内容上时的保持打开行为。
`TooltipProvider skipDelayDuration`	`number`	`300`	工具提示切换之间的跳过延迟。
`TooltipContent side / align`	`PopperContentProps`	`'top' / 'center'`	提示方向与对齐。
`TooltipContent sideOffset`	`number`	`4`	提示与触发器的偏移像素。
`TooltipArrow width / height`	`number`	`10 / 5`	箭头的宽度与高度。

Tooltip 悬停提示