show the tooltip only when ellipsis is active

Question

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

Since you set the content to be cut when it _would_ overflow, you will not _have_ any actuall overflow any more that you could check for … you would have to do that _before_ applying overflow:hidden. — CBroe, Oct 02 '13 at 10:01
Possible duplicate of [HTML - how can I show tooltip ONLY when ellipsis is activated](http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated) — Arpit Goyal, Jun 14 '16 at 05:38

score 13 · Answer 1 · edited Nov 20 '15 at 07:25

13

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);
}

edited Nov 20 '15 at 07:25

Community

1
1

answered Oct 02 '13 at 10:05

Gurpreet Singh

20,907
5
44
60

I have a stupid question the $(function...) where should I put it? – senior Oct 02 '13 at 10:53
How to do the same with TDs instead of DIVs? Can you make a working example about it? – smartmouse Jan 07 '16 at 11:49

score 0 · Answer 2 · answered Oct 31 '16 at 17:43

For anyone using qtip (being quite popular). First, add a class to each of your overflowing elements.

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

Then, use the jQuery selector to select multiple such elements, and apply the qTip plugin (or any other tooltip that comes to mind) on 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
            }
        });
    }
});

show the tooltip only when ellipsis is active

2 Answers2

Linked