跳到主要内容

Tooltip

  • 组件说明：暗色提示气泡，鼠标悬停时显示，用于传达简短上下文信息。
  • 组件组：Tips
  • Figma 页面：↳ Tips > Tooltip
  • 实现约定：TooltipContent 保留 Radix 浮层结构与动画骨架，design 层接管颜色、圆角、阴影和箭头视觉。
  • 默认交互：默认将 children 作为 trigger 元素。

基础用法​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 32, alignItems: 'center', padding: '40px 0' }}>
    <Tooltip content="Prompt Text" side="top" defaultOpen>
      <Button variant="secondary" size="sm">
        上方提示
      </Button>
    </Tooltip>

    <Tooltip content="Hover tooltip">
      <Button variant="secondary" size="sm">
        悬停试试
      </Button>
    </Tooltip>
  </div>,
)

方向变体​

Tooltip 支持 8 个方向，通过 side 和 align 组合控制。

结果
Loading...
实时编辑器
render(
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 8,
      padding: '48px 0',
    }}
  >
    <div style={{ display: 'flex', gap: 8 }}>
      {[
        { side: 'top', align: 'start', label: 'Top-Start' },
        { side: 'top', align: 'center', label: 'Top' },
        { side: 'top', align: 'end', label: 'Top-End' },
      ].map(({ side, align, label }) => (
        <Tooltip key={label} content={label} side={side} align={align}>
          <Button variant="tertiary" size="sm" style={{ width: 72 }}>
            {label}
          </Button>
        </Tooltip>
      ))}
    </div>
    {[
      {
        l: { side: 'left', align: 'start', label: 'Left-Start' },
        r: { side: 'right', align: 'start', label: 'Right-Start' },
      },
      {
        l: { side: 'left', align: 'center', label: 'Left' },
        r: { side: 'right', align: 'center', label: 'Right' },
      },
      {
        l: { side: 'left', align: 'end', label: 'Left-End' },
        r: { side: 'right', align: 'end', label: 'Right-End' },
      },
    ].map(({ l, r }) => (
      <div key={l.label} style={{ display: 'flex', justifyContent: 'space-between', width: 400 }}>
        <Tooltip content={l.label} side={l.side} align={l.align}>
          <Button variant="tertiary" size="sm" style={{ width: 72 }}>
            {l.label}
          </Button>
        </Tooltip>
        <Tooltip content={r.label} side={r.side} align={r.align}>
          <Button variant="tertiary" size="sm" style={{ width: 72 }}>
            {r.label}
          </Button>
        </Tooltip>
      </div>
    ))}
    <div style={{ display: 'flex', gap: 8 }}>
      {[
        { side: 'bottom', align: 'start', label: 'Bottom-Start' },
        { side: 'bottom', align: 'center', label: 'Bottom' },
        { side: 'bottom', align: 'end', label: 'Bottom-End' },
      ].map(({ side, align, label }) => (
        <Tooltip key={label} content={label} side={side} align={align}>
          <Button variant="tertiary" size="sm" style={{ width: 72 }}>
            {label}
          </Button>
        </Tooltip>
      ))}
    </div>
  </div>,
)

快捷键提示​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 32, alignItems: 'center', padding: '40px 0' }}>
    <Tooltip content="Select All" shortcut={['⇧', '⌘', 'A']} defaultOpen>
      <Button variant="secondary" size="sm">
        全选
      </Button>
    </Tooltip>

    <Tooltip content="Save" shortcut={['⌘', 'S']}>
      <Button variant="secondary" size="sm">
        保存
      </Button>
    </Tooltip>
  </div>,
)

Tooltip Props​

属性类型默认值说明
childrenReactNode—触发元素。默认直接将 children 作为 trigger。
contentReactNode—提示内容
titleReactNode—提示内容别名
shortcutReactNode[]—快捷键标签数组，如 ['⇧', '⌘', 'A']
side'top' | 'bottom' | 'left' | 'right''top'弹出方向
align'start' | 'center' | 'end''center'对齐方式
sideOffsetnumber8与触发元素的间距 (px)
classNamestring—自定义样式类
asChildbooleantrue是否将 children 作为触发器本体