Show tooltip only with active ellipsis

Question

I have the following div:

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

How to show tooltip only with active ellipsis?

I find this function

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

But I did not know how to use it, knowing that I use jsp and struts

Answer 1

Try something like this:

Working demo
Working DEMO - with a hint

 $(function() { $('div').each(function(i) { if (isEllipsisActive(this)) //Enable tooltip else //Disable tooltip }); }); function isEllipsisActive(e) { return (e.offsetWidth < e.scrollWidth); } 

Answer 2

For those who use qtip (quite popular). First add a class to each of your overflow elements.

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

Then use the jQuery selector to select several such elements and apply the qTip plugin (or any other hint that comes to mind) to your elements as such:

 $('.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 } }); } });