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

[lin52025iq]

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

[idux-bot]

Translation of this issue:

[Tooltip] When adding a text to the text, the prompt can be triggered

• I have searched the [isSues] (https://github.com/iduxfe/idux/isSues) of this repository and believe that this is not a duplicate.

What proplem does this feature solver?

When the component of the Tooltip has a text beyond the text, it is hidden beyond the content and displayed as an omission. When the content is on the content, the OverLay triggered Tooltip. If it is not exceeded, it will not be triggered.

For the description content of Title or card, or in the Cell of Table, the DOM may set a relatively fixed width or height, but the actual text content exceeds the size of the DOM. At this time, the general processing is to increase the DOM Overflow:Hidden; , but also hopes that users can use Tooltip to display complete content when the mouse hover is on the DOM, so I hope to add a pure display mode to Tooltip to achieve this demand.

What does the proposed api look like?

You can add Mode =" Text "to the Tooltip API as a pure display mode, and use the text to be displayed in the text (at this time, the Defaultslot passed in at this time will fail.For {{title}} ), passed into width (100%default, the width of the parent component), which means the width to be displayed and passed into the linenumber` (default 1, that is, that is, that is,Display 1 line) indicates the number of rows that need to be displayed.

<template>
    <div style="width: 100px;">
        <IxTooltip mode="text" width="100%" lineNumber="1" title="如果有超出的文字，悬浮展示全部内容；否则悬浮不会生效。" />
    </div>
</template>

A little thought:
You can add MouseNER or other events to the Rendertrigger or other trigger events.The display of vOverlay.