add tooltip to element which has css text-overflow:ellipses

Question

I have dynamic text which is loaded in table. I want to add popup/tooltip if the text has the css text-overflow:ellipses.

How can I fetch those td only which has the longer text than the width of column.

Ember.$('*').filter(function() {
            return Ember.$(this).css('text-overflow') === 'ellipsis';
        }).each(function(elm){
});

I tried above code to get the td which has text-overflow: ellipsis. But in elm I am getting number. I need complete element of td.

Wouldn't all divs have `text-overflow: ellipsis` set to them? — Paul van den Dool, Jan 16 '17 at 13:16
Would this help: http://stackoverflow.com/questions/6406843/detect-if-text-has-overflown? — Valtteri Laitinen, Jan 16 '17 at 17:24

score 1 · Accepted Answer · answered Jan 16 '17 at 16:47

The $('selector').each() passes the Index and the the Element to the callback. This is why you're just seeing a number. See more:

https://api.jquery.com/each/

Try this:

Ember.$('*').filter(function() {
  return Ember.$(this).css('text-overflow') === 'ellipsis';
}).each(function(ind, elm){
  // do things to elm now
});

This may give you more than just <td> elements, so be careful. May add:

return Ember.$(this).find("td").css('text-overflow') === 'ellipsis';

Hope that helps.

add tooltip to element which has css text-overflow:ellipses

1 Answers1