HTML - 如何在省略号被激活时显示工具提示 [英] HTML - how can I show tooltip ONLY when ellipsis is activated

问题描述

我的页面中有一个包含省略号的动态数据。含义：

I have got a span with dynamic data in my page that contain ellipsis. Meaning:

<span style='text-overflow: ellipsis; overflow : hidden; white-space: nowrap;  
 width: 71;'>${myData}</span>

，我想添加到相同内容的这个元素工具提示（title ='$ { myData}'），但我希望它只有当内容很长，省略号出现在屏幕上时才会出现。


有什么办法吗？

and I'd like to add to this element tooltip with the same content (title='${myData}') 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?

一个方向 - 当浏览器（IE在我的case）绘制省略号它会抛出一个事件？

one direction - when the browser (IE in my case) draw ellipsis- does it throw an event about it?

推荐答案

这里有一种使用内置省略号设置的方法， code> title 属性on-demand（with jQuery）建立在Martin Smith的注释上：

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:

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

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

这篇关于HTML - 如何在省略号被激活时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！