@beisen-phoenix/tooltip
v3.3.55
Published
简单的文字提示气泡框。
Downloads
329
Readme
简单的文字提示气泡框。
概述
鼠标移入则显示提示的简单气泡浮层,应用于显示简单的文字提示,不承载复杂文本和操作。
可用来代替浏览器默认的 title
属性。
API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 提示文字,配合isHTMLContent可以支持html格式。 | string | 无 |
| extraCls | 自定义的容器class,一般通过此class来实现自定义样式 | string | 无 |
| isHTMLContent | 是否提示文字为html,如果置为true则正文会被当做html识别,同时会有xss潜在风险。 | boolean | false
|
| showOverflowTooltip | 根据文本是否打点来决定是否展示Tooltip,注意此时节点需要是仅有一层标签包裹的纯文本才能正确计算,详情请见样例。 | boolean | false
|
| destroyTooltipOnHide | 是否在tooltip隐藏时销毁dom节点 | boolean | false
|
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | true
|
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true
|
| defaultVisible | 默认是否显隐 | boolean | false
|
| getTooltipContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置,可选 top
left
right
bottom
topLeft
topRight
bottomLeft
bottomRight
leftTop
leftBottom
rightTop
rightBottom
| string | top |
| trigger | 触发行为,可选 hover
| string | hover |
| visible | 用于手动控制浮层显隐 | boolean | false
|
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
| align | 该值将合并到 placement 的配置中,设置参考 rc-tooltip | Object | 无 |
| maxWidth | 蒙层的最大宽度 | number | 无 |
注意
请确保 Tooltip
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。
一点碎碎念
- 整体思路来自 antdesign/tooltip,封装了rc-tooltip并在此基础上做了一些自动计算的处理。
- 当横向超过一屏时,max-width的元素显示会无法维持自身的宽度,造成内塌陷,目前采用的解决方案是在初始化时使用临时的 div存放文字,取实际宽度设置给该元素,如果有更好的方案请反馈给我,
- 没有设置title时,默认会以当前节点内的文字进行赋值
- autoAdjustOverflow仅支持在文档边缘时触发,如果是滚动条滚动后遮住的情况,并不会进行调整。
- showOverflowTooltip判断文本是否打点的逻辑是:取当前节点的scrollWidth和clientWidth,如果scrollWidth大于clientWidth,则为打点状态,其他情况为非打点状态。组件会根据该状态自动判断是否需要显示 tooltip。注意:出于性能考虑,此情况下文本内容仅会在初始化时取值一次,后续文本节点变更都不会同步。
- 由于当元素从左侧超出界面之外时,rc的自适应逻辑会导致箭头方向错误,此处不得不使用额外计算逻辑来处理,这里可能会有bug。
- 由下向上连续触发tooltip不消失的问题,可以使用mouseLeaveDelay参数设置为0来解决