CODEWITHSUNDEEP
javascriptjquery
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

How to show tooltip when ellipsis is applied to the text?

I tried with the following code:

$('td').bind('mouseenter', function(){
    var $this = $(this);
    if(this.offsetWidth < this.scrollWidth){
        var text = $this.text();
        $this.attr("data-title",text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
});

jsFiddle

Works fine, but not at the first time, is necessary to mouse over once again to get it work.
Any help is greatly appreciated! Thank you!

ps. I don't want to insert data-title inline.

Upvotes: 4

Views: 6833

Answers (3)

neel upadhyay
neel upadhyay

Reputation: 348

Please see this code for if elipsis come then and then tooltip appear

$(function() {
    $('div').each(function(i) {
        if (isEllipsisActive(this)) {
            $(this).css({'color':'red'});
            $(this).attr("title", $(this).text());
        }
        else
             $(this).css({'color':'green'});
    });
});

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-cless" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">neel upadhyay @g mail .com hello world
</div>
    
<div class="div-cless" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
    asdasf a
<div>

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Fiddle Demo

$('td').bind('mouseenter', function () {
    var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {
        var text = $this.text();
        $this.attr("data-title", text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
}).mouseenter();
// ^ trigger the mouseenter event so that tooltip get bind to td

Note:First Load your tooltip plugin than write this method

Update You can also do

Fiddle Demo

$('td').each(function () {
    var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {
        var text = $this.text();
        $this.attr("data-title", text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
});

Upvotes: 6

sabof
sabof

Reputation: 8192

You are not using the API correctly. .tipper doesn't show a tooltip, it binds an event. Notice that this also works.

var text = $('td').text();
$('td').attr("data-title",text);
$('td').tipper({
  direction: "bottom",
  follow: true
});

Upvotes: 1

Related Questions