javascript - HTML-仅在激活省略号时如何显示工具提示(HTML - how can I show tooltip ONLY when ellipsis is activated)

Question

I have got a span with dynamic data in my page, with ellipsis style.

(我的页面上有一个带有ellipsis样式的动态数据。)

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

I'd like to add to this element tooltip with the same content, but I want it to appear only when the content is long and the ellipsis appear on screen.

(我想添加具有相同内容的该元素工具提示，但是我希望它仅在内容很长且省略号出现在屏幕上时才显示。)

Is there any way to do it?

(有什么办法吗？)

Does the browser throw an event when ellipsis is activated?

(ellipsis激活时，浏览器是否会引发事件？)

*Browser: Internet Explorer

(*浏览器：Internet Explorer)

  ask by Spiderman translate from so

Answer 1

Here's a way that does it using the built-in ellipsis setting, and adds the title attribute on-demand (with jQuery) building on Martin Smith's comment:

(这是一种使用内置省略号设置的方法，并根据马丁史密斯的注释按需添加了title属性（使用jQuery）：)

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});