设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待

提示 ToolTip

文字提示气泡框、主要用于提示一些简单的文本信息,可用于代替浏览器自带的title提示。

基础示例

基本用法。

箭头指向中心

设置了 arrowPointAtCenter 后,箭头将指向目标元素的中心。

ToolTip 弹出位置

共有12个方向。

自定义颜色

Tooltip Props

参数说明类型默认值
prefixCls类名前缀string-
arrowPointAtCenter箭头是否指向元素中心booleanfalse
white是否使用白底的提示boolean-
overlayClassName弹出提示的类名string-
overlayStyle弹出提示的样式CSSProperties-
overlayInnerStyle弹出提示内容的样式object-
color背景颜色string-
defaultVisible默认显示隐藏状态boolean-
visible显示隐藏状态boolean-
mouseLeaveDelay鼠标移出后延时多少才隐藏 Tooltip,单位:秒number0.1
mouseEnterDelay鼠标移入后延时多少才显示 Tooltip,单位:秒number0.1
title标题ReactNode-
placement气泡框位置"top"top
trigger触发行为,可选 hover | focus | click | contextMenu,可使用数组设置多个触发行为string['hover']
onVisibleChange显示隐藏的回调((visible: boolean) => void)-
getPopupContainer提示信息挂载点,默认挂载到 body 上((node: HTMLElement) => HTMLElement)-

贡献者