Preview Updated 2026-05-10

Tooltip

Lightweight hint popup — 4 placements, auto-flip near viewport edges, hover and focus triggers.

Basic usage

Wrap any trigger element. Shows on hover or keyboard focus, hides on mouse leave or blur. The tooltip renders into <body> via Teleport / Portal so it isn’t clipped by parent overflow.

背景

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

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

<script setup>
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="Shown on hover or keyboard focus">
    <CfButton variant="tertiary">Hover me</CfButton>
  </CfTooltip>
);
}

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

export default function Demo() {
return (
  <CfTooltip content="Shown on hover or keyboard focus">
    <CfButton variant="tertiary">Hover me</CfButton>
  </CfTooltip>
);
}

Placements

placement sets the preferred direction. When the preferred side doesn’t fit (near a viewport edge) it auto-flips to the opposite side.

背景

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

<template>
  <!-- 3×3 grid: each direction has its own quadrant so auto-flip doesn't fire. -->
  <div class="tt-grid">
    <span></span>
    <CfTooltip content="顶部" placement="top">
      <CfButton variant="tertiary">Top</CfButton>
    </CfTooltip>
    <span></span>

    <CfTooltip content="左侧" placement="left">
      <CfButton variant="tertiary">Left</CfButton>
    </CfTooltip>
    <span></span>
    <CfTooltip content="右侧" placement="right">
      <CfButton variant="tertiary">Right</CfButton>
    </CfTooltip>

    <span></span>
    <CfTooltip content="底部" placement="bottom">
      <CfButton variant="tertiary">Bottom</CfButton>
    </CfTooltip>
    <span></span>
  </div>
</template>

<style scoped>
.tt-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 56px 80px;
  padding: 56px 0;
}
</style>

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

<template>
  <!-- 3×3 grid: each direction has its own quadrant so auto-flip doesn't fire. -->
  <div class="tt-grid">
    <span></span>
    <CfTooltip content="顶部" placement="top">
      <CfButton variant="tertiary">Top</CfButton>
    </CfTooltip>
    <span></span>

    <CfTooltip content="左侧" placement="left">
      <CfButton variant="tertiary">Left</CfButton>
    </CfTooltip>
    <span></span>
    <CfTooltip content="右侧" placement="right">
      <CfButton variant="tertiary">Right</CfButton>
    </CfTooltip>

    <span></span>
    <CfTooltip content="底部" placement="bottom">
      <CfButton variant="tertiary">Bottom</CfButton>
    </CfTooltip>
    <span></span>
  </div>
</template>

<style scoped>
.tt-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 56px 80px;
  padding: 56px 0;
}
</style>

<CfTooltip content="Top" placement="top"><CfButton>Top</CfButton></CfTooltip>
<CfTooltip content="Bottom" placement="bottom"><CfButton>Bottom</CfButton></CfTooltip>
<CfTooltip content="Left" placement="left"><CfButton>Left</CfButton></CfTooltip>
<CfTooltip content="Right" placement="right"><CfButton>Right</CfButton></CfTooltip>

<CfTooltip content="Top" placement="top"><CfButton>Top</CfButton></CfTooltip>
<CfTooltip content="Bottom" placement="bottom"><CfButton>Bottom</CfButton></CfTooltip>
<CfTooltip content="Left" placement="left"><CfButton>Left</CfButton></CfTooltip>
<CfTooltip content="Right" placement="right"><CfButton>Right</CfButton></CfTooltip>

Delay and long text

delay controls the wait before showing (ms). maxWidth caps the width and wraps overflow.

背景

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

<template>
  <div class="demo-row" style="gap: 1rem;">
    <CfTooltip content="0 延迟显示" :delay="0">
      <CfButton variant="tertiary">无延迟</CfButton>
    </CfTooltip>
    <CfTooltip content="500ms 延迟" :delay="500">
      <CfButton variant="tertiary">500ms</CfButton>
    </CfTooltip>
    <CfTooltip
      content="内容比较长会自动换行，限制最大宽度避免一行甩到屏幕外去；超出视口边缘也会自动翻转方向。"
      :max-width="220"
    >
      <CfButton variant="tertiary">长文本</CfButton>
    </CfTooltip>
  </div>
</template>

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

<template>
  <div class="demo-row" style="gap: 1rem;">
    <CfTooltip content="0 延迟显示" :delay="0">
      <CfButton variant="tertiary">无延迟</CfButton>
    </CfTooltip>
    <CfTooltip content="500ms 延迟" :delay="500">
      <CfButton variant="tertiary">500ms</CfButton>
    </CfTooltip>
    <CfTooltip
      content="内容比较长会自动换行，限制最大宽度避免一行甩到屏幕外去；超出视口边缘也会自动翻转方向。"
      :max-width="220"
    >
      <CfButton variant="tertiary">长文本</CfButton>
    </CfTooltip>
  </div>
</template>

<CfTooltip content="0 delay" delay={0}>
<CfButton>No delay</CfButton>
</CfTooltip>

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

<CfTooltip content="Long content wraps automatically..." maxWidth={220}>
<CfButton>Long text</CfButton>
</CfTooltip>

<CfTooltip content="0 delay" delay={0}>
<CfButton>No delay</CfButton>
</CfTooltip>

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

<CfTooltip content="Long content wraps automatically..." maxWidth={220}>
<CfButton>Long text</CfButton>
</CfTooltip>

API

Prop	Type	Default	Description
`content`	`string` (Vue) / `ReactNode` (React)	—	Popup content; Vue also accepts `#content` slot
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred side; auto-flips on overflow
`delay`	`number`	`100`	Show delay (ms)
`hideDelay`	`number`	`80`	Hide delay to avoid flicker
`disabled`	`boolean`	`false`	Hide entirely
`offset`	`number`	`8`	Gap between trigger and popup (px)
`maxWidth`	`number \| string`	—	Cap the width; wrap overflow