@beisen-phoenix/tooltip NPM

概述

鼠标移入则显示提示的简单气泡浮层，应用于显示简单的文字提示，不承载复杂文本和操作。
可用来代替浏览器默认的 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来解决