css - 仅当省略号处于活动状态时才显示工具提示

Question

我有下一个div：

 <div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>

如何仅在省略号处于活动状态时显示工具提示？

我找到了这个功能

    function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

但我不知道如何使用它知道我使用 jsp 和 struts

Answer 1

尝试这样的事情：

工作演示
工作演示 - 带有工具提示

$(function() {
    $('div').each(function(i) {

         if (isEllipsisActive(this))
            //Enable tooltip 
         else
            //Disable tooltip
    });
});

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Answer 2

对于任何使用 qtip（非常受欢迎）的人。首先，为每个溢出的元素添加一个类。

<span class="ellipsis-text">Some very long text that will overflow</span>

然后，使用 jQuery 选择器选择多个此类元素，并将 qTip 插件（或任何其他想到的工具提示）应用于您的元素，如下所示：

$('.ellipsis-text').each(function() {
    if (this.offsetWidth < this.scrollWidth) {
        $(this).qtip({
            content: {
                text: $(this).text()
            },
            position: {
                at: 'bottom center',
                my: 'top center'
            },
            style: {
                classes: 'qtip-bootstrap', //Any style you want
            }
        });
    }
});