idux
idux copied to clipboard
[comp:tooltip] 增加有超出文字时才可以触发提示
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
当 触发 tooltip 的组件 有文本超出时 隐藏超出内容显示为省略号,hover 到内容上时触发 tooltip 的
ɵOverlay
,如果没有超出则不触发。
对于 title 或者 卡片的描述内容、或者是 table 的 cell 中,可能会出现 dom 设置了相对固定宽度或高度,但实际的文字内容超出了 dom 的大小,这时通常的处理是为 dom 增加 overflow: hidden;
,但又希望用户在 鼠标 hover 到 dom 上时可以使用 tooltip 展示完整的内容,因此希望在 tooltip 中增加纯展示模式,以实现这种需求。
What does the proposed API look like?
可以在 tooltip api 中增加 mode="text"
表示为纯展示模式,并使用 title 传入要展示的文本(这时候传入的 default
插槽将失效,可以将默认的 triggerNode
设置为 <span>{{ title }}</span>
),传入 width
(默认为 100%,即父组件宽度) 表示要展示的宽度,传入 lineNumber
(默认为 1,即展示1行)表示需要展示的行数。
<template>
<div style="width: 100px;">
<IxTooltip mode="text" width="100%" lineNumber="1" title="如果有超出的文字,悬浮展示全部内容;否则悬浮不会生效。" />
</div>
</template>
一点点想法:
可以在 renderTrigger
上增加 mouseenter
或者其他触发时的事件,通过判断 dom.offsetWidth >= dom.scrollWidth
(单行)或者dom.offsetHeight >= dom.scrollHeight
(多行), 改变 tooltip 的 ɵOverlay
的显示。