Tooltip 提示框
Tooltip 现在既使用 Rue 基础轻量、包裹式的视觉习惯,也补上更完整的语义 API。你可以使用tip和Tooltip.Content,也可以切到title、overlay、受控显示、 自定义颜色和语义化样式扩展。
# Tooltip
# Tooltip placements
# Rich content
发布检查
包含静态资源、接口联调和埋点确认。
Rue
Tooltip.Content 适合承载更自由的结构化信息。
# Colors and semantic styling
自定义颜色
可通过 classNames.root 和 styles.body 精细调节
# Trigger modes
Right click me
# Force open
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
arrow | 是否显示箭头,适合在卡片式信息和标签式提示之间切换语气。 | boolean | true |
classNames | 语义化类名扩展,支持分别定制根节点和提示内容。 | { root?: string; body?: string } | - |
color | 支持 daisyUI 语义色,也支持自定义颜色字符串。 | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | string | - |
content / overlay / title / tip | 提示内容入口,支持文本、JSX 节点、函数返回值,并支持基础的 tip 写法。 | any | - |
defaultOpen | 非受控初始显示状态。 | boolean | false |
disabled | 禁用 Tooltip,仅保持包裹结构,不显示提示内容。 | boolean | false |
open | 受控显示状态,适合与外部按钮、校验状态或页面步骤联动。 | boolean | - |
onOpenChange | 显示状态变化回调。 | (open: boolean) => void | - |
overlayClassName / overlayStyle | 提示内容层的类名和样式扩展。 | string / Record<string, any> | - |
placement | 支持四个基础方向和常见浮层组件里的角落别名。 | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'top' |
styles | 语义化样式扩展,支持根节点与提示内容。 | { root?: Record<string, any>; body?: Record<string, any> } | - |
trigger | 触发方式,可单独或组合使用 hover、focus、click、contextMenu。 | 'hover' | 'focus' | 'click' | 'contextMenu' | Array<...> | ['hover', 'focus'] |