Tooltip 文字提示

悬停时显示的文字提示气泡

何时使用

  • 需要悬浮文字提示时。

导入

import { TooltipSingle } from "@reglow/reui";
// 复合式用法（reka-ui）：Tooltip + TooltipTrigger + TooltipContent + TooltipProvider

基础用法

最简单的用法。

<template>
  <TooltipSingle title="提示文字">
    <span>鼠标移入显示提示</span>
  </TooltipSingle>
</template>

更多示例

位置

位置有 12 个方向。

<template>
  <div class="flex flex-col items-center gap-4">
    <div class="flex gap-4">
      <TooltipSingle title="Top Left" placement="topLeft"><Button>TL</Button></TooltipSingle>
      <TooltipSingle title="Top" placement="top"><Button>Top</Button></TooltipSingle>
      <TooltipSingle title="Top Right" placement="topRight"><Button>TR</Button></TooltipSingle>
    </div>
    <div class="flex justify-between w-[300px]">
      <div class="flex flex-col gap-4">
        <TooltipSingle title="Left Top" placement="leftTop"><Button>LT</Button></TooltipSingle>
        <TooltipSingle title="Left" placement="left"><Button>Left</Button></TooltipSingle>
        <TooltipSingle title="Left Bottom" placement="leftBottom"><Button>LB</Button></TooltipSingle>
      </div>
      <div class="flex flex-col gap-4">
        <TooltipSingle title="Right Top" placement="rightTop"><Button>RT</Button></TooltipSingle>
        <TooltipSingle title="Right" placement="right"><Button>Right</Button></TooltipSingle>
        <TooltipSingle title="Right Bottom" placement="rightBottom"><Button>RB</Button></TooltipSingle>
      </div>
    </div>
    <div class="flex gap-4">
      <TooltipSingle title="Bottom Left" placement="bottomLeft"><Button>BL</Button></TooltipSingle>
      <TooltipSingle title="Bottom" placement="bottom"><Button>Bottom</Button></TooltipSingle>
      <TooltipSingle title="Bottom Right" placement="bottomRight"><Button>BR</Button></TooltipSingle>
    </div>
  </div>
</template>

多彩文字提示

多种预设色彩的文字提示样式，用作不同场景使用。

<script setup>
const colors = [
  "pink", "red", "yellow", "orange", "cyan", "green", "blue",
  "purple", "geekblue", "magenta", "volcano", "gold", "lime",
];
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <Tooltip
      v-for="c in colors"
      :key="c"
      title="提示文字"
      :color="c"
    >
      <Button>{{ c }}</Button>
    </TooltipSingle>
  </div>

  <!-- 自定义颜色 -->
  <TooltipSingle title="提示文字" color="#f50">
    <Button>#f50</Button>
  </TooltipSingle>
</template>

受控显示

通过 open 属性受控显示。

<script setup>
import { ref } from "vue";
const open = ref(false);
</script>

<template>
  <TooltipSingle v-model:open="open" title="受控提示">
    <Button @click="open = !open">Toggle</Button>
  </TooltipSingle>
</template>

自定义内容

通过 #title slot 自定义提示内容。

<template>
  <Tooltip>
    <Button>Hover me</Button>
    <template #title>
      <div class="flex flex-col gap-1">
        <span>自定义标题</span>
        <span class="text-xs opacity-70">副标题描述</span>
      </div>
    </template>
  </TooltipSingle>
</template>

延迟显示

<template>
  <TooltipSingle title="延迟显示" :mouse-enter-delay="500" :mouse-leave-delay="200">
    <Button>Hover (500ms delay)</Button>
  </TooltipSingle>
</template>

最大宽度

<template>
  <TooltipSingle title="这是一段很长的提示文字，超过最大宽度后会自动换行显示" :max-width="200">
    <Button>Max Width 200px</Button>
  </TooltipSingle>
</template>

API

Props

参数说明类型默认值
title提示文字string-
color背景颜色（预设色名或色值）string-
placement位置TooltipPlacementtop
arrow是否显示箭头booleantrue
open是否受控显示（配合 openChange 事件）boolean-
defaultOpen默认是否显示booleanfalse
mouseEnterDelay延迟显示时间（毫秒）number100
mouseLeaveDelay延迟隐藏时间（毫秒）number100
sideOffset偏移量number6
maxWidth最大宽度number | string250
class附加类名string-

Events

事件说明回调参数
openChange显示/隐藏变化(open: boolean)

Slots

名称说明
default触发元素
title自定义提示内容

Placement

12 个方向：

值说明
top上方居中
topLeft上方左对齐
topRight上方右对齐
bottom下方居中
bottomLeft下方左对齐
bottomRight下方右对齐
left左侧居中
leftTop左侧顶部对齐
leftBottom左侧底部对齐
right右侧居中
rightTop右侧顶部对齐
rightBottom右侧底部对齐

预设颜色

pink red yellow orange cyan green blue purple geekblue magenta volcano gold lime

使用预设颜色或自定义色值时，文字颜色自动适配为白色。

Timeline 时间轴
按照时间顺序展示事件、操作记录、流程进度。
Tree 树形控件
展示组织架构、文件目录、分类列表等层级数据，支持单选多选、搜索、拖拽。