idux icon indicating copy to clipboard operation
idux copied to clipboard

[comp:tooltip] 增加有超出文字时才可以触发提示

Open lin52025iq opened this issue 1 year ago • 1 comments

  • [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 的显示。

lin52025iq avatar Mar 09 '23 06:03 lin52025iq