开发预览更新于 2026-05-10

Tooltip 文字提示

轻量浮层提示 —— 4 种 placement、自动避让视口边缘、hover/focus 双触发。

基础用法

包裹任意触发元素。鼠标悬停或键盘聚焦时显示，鼠标移出或失焦时隐藏。Tooltip 通过 Teleport / Portal 渲染到 <body>，不受父容器 overflow 影响。

<script setup lang="ts">
import { CfButton, CfTooltip } from '@chufix-design/vue';
</script>

<template>
<CfTooltip content="鼠标悬停或键盘聚焦都会显示">
  <CfButton variant="tertiary">悬停我</CfButton>
</CfTooltip>
</template>

import { CfButton, CfTooltip } from '@chufix-design/react';

export default function Demo() {
return (
  <CfTooltip content="鼠标悬停或键盘聚焦都会显示">
    <CfButton variant="tertiary">悬停我</CfButton>
  </CfTooltip>
);
}

4 种方向

placement 控制首选方向。当首选方向放不下（贴近视口边缘）时，会自动翻到对侧。

<CfTooltip content="顶部" placement="top"><CfButton>Top</CfButton></CfTooltip>
<CfTooltip content="底部" placement="bottom"><CfButton>Bottom</CfButton></CfTooltip>
<CfTooltip content="左侧" placement="left"><CfButton>Left</CfButton></CfTooltip>
<CfTooltip content="右侧" placement="right"><CfButton>Right</CfButton></CfTooltip>

<CfTooltip content="顶部" placement="top"><CfButton>Top</CfButton></CfTooltip>
<CfTooltip content="底部" placement="bottom"><CfButton>Bottom</CfButton></CfTooltip>
<CfTooltip content="左侧" placement="left"><CfButton>Left</CfButton></CfTooltip>
<CfTooltip content="右侧" placement="right"><CfButton>Right</CfButton></CfTooltip>

延迟与长文本

delay 控制显示前的等待时间（毫秒）。maxWidth 限制最大宽度，超出换行。

<CfTooltip content="0 延迟" :delay="0">
<CfButton>无延迟</CfButton>
</CfTooltip>

<CfTooltip content="500ms" :delay="500">
<CfButton>500ms</CfButton>
</CfTooltip>

<CfTooltip content="内容比较长，会自动换行..." :max-width="220">
<CfButton>长文本</CfButton>
</CfTooltip>

<CfTooltip content="0 延迟" delay={0}>
<CfButton>无延迟</CfButton>
</CfTooltip>

<CfTooltip content="500ms" delay={500}>
<CfButton>500ms</CfButton>
</CfTooltip>

<CfTooltip content="内容比较长，会自动换行..." maxWidth={220}>
<CfButton>长文本</CfButton>
</CfTooltip>

API

Prop	类型	默认值	说明
`content`	`string`（Vue）/ `ReactNode`（React）	—	浮层内容；Vue 还可用 `#content` 插槽
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	首选方向，溢出时自动翻转到对侧
`delay`	`number`	`100`	显示前延迟（毫秒）
`hideDelay`	`number`	`80`	隐藏前延迟，避免抖动
`disabled`	`boolean`	`false`	完全不显示
`offset`	`number`	`8`	触发器与浮层之间的间距（像素）
`maxWidth`	`number \| string`	—	限制最大宽度，超出换行