Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

show the tooltip only when ellipsis is active

Tags:

css

I have the next div:

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

How can I show the tooltip only when ellipsis is active?

I find this function

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

But I didn't know how to use it knowing I use jsp and struts

like image 922
senior Avatar asked Oct 02 '13 09:10

senior


1 Answers

Try something like this:

Working DEMO
Working DEMO - with tooltip

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

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

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
like image 200
Gurpreet Singh Avatar answered Oct 02 '22 17:10

Gurpreet Singh