ellipsis show tooltip bug

[cwjTerrace]

TuSimple/naive-ui version (版本)

2.19.9

Vue version (Vue 版本)

3.2.20

Browser and its version (浏览器及其版本)

Microsoft Edge 94.0.992.50

System and its version (系统及其版本)

MacOS(11.6)

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/funny-swirles-f2m9e?file=/src/Demo.vue

Reappearance steps (重现步骤)

624748504 文本省略字体换了之后，宽度正好可以放下，显示了省略号，但不显示tootip，感觉是浏览器的bug

Expected results (期望的结果)

显示tooltip

Actual results (实际的结果)

没有显示tooltip

Remarks (补充说明)

[Volankey]

感觉还是和字体或者浏览器有关，我这没啥问题

[cwjTerrace]

感觉还是和字体或者浏览器有关，我这没啥问题

你是没显示省略号，还是显示了tooltip

[Volankey]

感觉还是和字体或者浏览器有关，我这没啥问题

你是没显示省略号，还是显示了tooltip

没触发浏览器的文本省略

[cwjTerrace]

感觉还是和字体或者浏览器有关，我这没啥问题

你是没显示省略号，还是显示了tooltip

没触发浏览器的文本省略

能截个图看看吗

[Volankey]

[cwjTerrace]

什么浏览器？我跟用chrome、safari、edge试了都有省略号

[cwjTerrace]

元素的scrollWidth是70.06, 但是scrollWidth只能是整数，然后返回了70
tooltipDisabled = trigger.scrollWidth <= trigger.offsetWidth这个判断就有问题了

[07akioni]

有啥办法能检查出精确的宽度么？

[cwjTerrace]

offsetWidth可以通过getBoundingClientRect()获取，但是scrollWidth没找到办法

[07akioni]

offsetWidth可以通过getBoundingClientRect()获取，但是scrollWidth没找到办法

那这个我感觉不太好弄的样子

[cwjTerrace]

创建一个比较dom，比较完remove，这个办法我React版本试了可行

[07akioni]

创建一个比较dom，比较完remove，这个办法我React版本试了可行

具体是怎么比较？

[cwjTerrace]

    const span = document.createElement('span');
    span.style.zIndex = '-1';
    span.style.visibility = 'hidden';
    span.style.position = 'fixed';
    document.body.appendChild(span);
    ReactDOM.render(React.createElement(React.Fragment, { children }), span);
    const result = span.getBoundingClientRect().width <= trigger.getBoundingClientRect().width;
    document.body.removeChild(span);
    return result;

[cwjTerrace]

span.getBoundingClientRect().width 这个宽度带小数点

[07akioni]

span.getBoundingClientRect().width 这个宽度带小数点

这玩意会受 transfrom 的影响，尤其是放在带动画的组件里会是个灾难。

目前看来唯一的可能是让用户决定用哪种方式对比宽度，不知道有没有更好的办法。

[Akash187]

Popover is going offscreen on ellipses. Any Fix? Please reply in English.

[cwjTerrace]

@07akioni getTooltipDisabled 我觉得调用时机需要改一下，现在是页面加载的时候调用的，需要改成hover或者click的时候调用。现在的调用时机在ssr的时候会有问题

[07akioni]

going offscreen on ellipses. Any Fix? Please repl

Popover is going offscreen on ellipses. Any Fix? Please reply in English.

Set style for tooltip:

 :tooltip="{ style: 'max-width: 100px;' }"

Sorry for late response, I've missed the notification.