HTML - how can I show tooltip ONLY when ellipsis is activated

Question

I have got a span with dynamic data in my page  with ellipsis style    my-class     text-overflow  ellipsis    overflow  hidden    white-space  nowrap      width  71px       lt span id  myId  class  my-class  gt  lt  span gt    document getElementById  myId   innerText           I d like to add to this element tooltip with the same content  but I want it to appear only when the content is long and the ellipsis appear on screen   Is there any way to do it  Does the browser throw an event when ellipsis is activated    Browser  Internet Explorer

User · Answer

We need to detect whether ellipsis is really applied, then to show a tooltip to reveal full text. It is not enough by only comparing "this.offsetWidth < this.scrollWidth" when the element nearly holding its content but only lacking one or two more pixels in width, especially for the text of full-width Chinese/Japanese/Korean characters.

Here is an example: http://jsfiddle.net/28r5D/5/

I found a way to improve ellipsis detection:

Compare "this.offsetWidth < this.scrollWidth" first, continue step #2 if failed.
Switch css style temporally to {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}.
Let browser do relayout. If word-wrap happening, the element will expands its height which also means ellipsis is required.
Restore css style.

Here is my improvement: http://jsfiddle.net/28r5D/6/

User · Answer

If you want to do this solely using javascript  I would do the following  Give the span an id attribute  so that it can easily be retrieved from the DOM  and place all the content in an attribute named  content     lt span id  myDataId  style  text-overflow  ellipsis  overflow   hidden   white-space  nowrap  width  71   content    myData   gt   myData  lt  span gt    Then  in your javascript  you can do the following after the element has been inserted into the DOM   var elemInnerText  elemContent  elemInnerText   document getElementById  myDataId   innerText  elemContent   document getElementById  myDataId   getAttribute  content   if elemInnerText length  lt   elemContent length       document getElementById  myDataId   setAttribute  title   elemContent        Of course  if you re using javascript to insert the span into the DOM  you could just keep the content in a variable before inserting it  This way you don t need a content attribute on the span   There are more elegant solutions than this if you want to use jQuery

User · Answer

This was my solution  works as a charm         document  on  mouseover    input  span   function           var needEllipsis     this  css  text-overflow    amp  amp   this offsetWidth  lt  this scrollWidth         var hasNotTitleAttr   typeof   this  attr  title        undefined         if  needEllipsis     true              if hasNotTitleAttr     true                 this  attr  title     this  val                               if needEllipsis     false  amp  amp  hasNotTitleAttr    false             this  removeAttr  title

User · Answer

Here s a Vanilla JavaScript solution    x000D   x000D   function init     x000D   x000D    var cells   document getElementsByClassName  cell    x000D   x000D    for let index   0  index  lt  cells length    index    x000D      let cell   cells item index   x000D      cell addEventListener  mouseenter   setTitleIfNecessary  false   x000D      x000D   x000D    function setTitleIfNecessary     x000D      if this offsetWidth  lt  this scrollWidth    x000D        this setAttribute  title   this innerHTML   x000D        x000D      x000D   x000D        x000D   cell   x000D    white-space  nowrap  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    border  1px  x000D    border-style  solid  x000D    width  120px   x000D    x000D   lt div class  cell  gt hello world  lt  div gt  x000D   lt div class  cell  gt hello mars  kind regards  world lt  div gt  x000D   x000D   x000D

User · Answer

Here s a way that does it using the built-in ellipsis setting  and adds the title attribute on-demand  with jQuery  building on Martin Smith s comment       mightOverflow   bind  mouseenter   function        var  this     this        if this offsetWidth  lt  this scrollWidth  amp  amp    this attr  title              this attr  title    this text

User · Answer

I have CSS class  which determines where to put ellipsis  Based on that  I do the following  element set could be different  i write those  where ellipsis is used  of course it could be a separate class selector      document  on  mouseover    input  td  th   function         if    this  css  text-overflow    amp  amp  typeof   this  attr  title        undefined               this  attr  title     this  val

User · Answer

uos   s answer is fundamentally correct  but you probably don t want to do it in the mouseenter event  That s going to cause it to do the calculation to determine if it s needed  each time you mouse over the element  Unless the size of the element is changing  there s no reason to do that   It would be better to just call this code immediately after the element is added to the DOM   var  ele       mightOverflow    var ele    ele eq 0   if  ele offsetWidth  lt  ele scrollWidth       ele attr  title    ele text       Or  if you don t know when exactly it s added  then call that code after the page is finished loading   if you have more than a single element that you need to do this with  then you can give them all the same class  such as  mightOverflow    and use this code to update them all       mightOverflow   each function         var  ele     this       if  this offsetWidth  lt  this scrollWidth           ele attr  title    ele text

User · Answer

Here s a pure CSS solution  No need for jQuery  It won t show a tooltip  instead it ll just expand the content to its full length on mouseover   Works great if you have content that gets replaced  Then you don t have to run a jQuery function every time    might-overflow       text-overflow  ellipsis      overflow   hidden      white-space  nowrap      might-overflow hover       text-overflow  clip      white-space  normal      word-break  break-all

User · Answer

I created a jQuery plugin that uses Bootstrap s tooltip instead of the browser s build-in tooltip  Please note that this has not been tested with older browser   JSFiddle  https   jsfiddle net 0bhsoavy 4     fn tooltipOnOverflow   function options          this  on  mouseenter   function         if  this offsetWidth  lt  this scrollWidth            options   options      placement   auto           options title     this  text            this  tooltip options           this  tooltip  show          else         if    this  data  bs tooltip               tooltip tooltip  hide             tooltip removeData  bs tooltip

User · Answer

Here is my jQuery plugin    function           use strict         fn tooltipOnOverflow   function               this  on  mouseenter   function                 if  this offsetWidth  lt  this scrollWidth                      this  attr  title     this  text                   else                     this  removeAttr  title                                        jQuery     Usage      td  th   tooltipOnOverflow      Edit   I have made a gist for this plugin  https   gist github com UziTech d45102cdffb1039d4415

User · Answer

Here are two other pure CSS solutions    Show the truncated text in place     x000D   x000D   overflow   x000D    overflow  hidden  x000D    -ms-text-overflow  ellipsis  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    x000D   x000D   overflow hover   x000D    overflow  visible  x000D    x000D   x000D   overflow hover span   x000D    position  relative  x000D    background-color  white  x000D   x000D    box-shadow  0 0 4px 0 black  x000D    border-radius  1px  x000D    x000D   lt div gt  x000D     lt span class  overflow  style  float  left  width  50px  gt  x000D       lt span gt Long text that might overflow  lt  span gt  x000D     lt  span gt  x000D    Lorem ipsum dolor sit amet  consectetur adipisicing elit  Ad recusandae perspiciatis accusantium quas aut explicabo ab  Doloremque quam eos  alias dolore  iusto pariatur earum  ullam  quidem dolores deleniti perspiciatis omnis  x000D   lt  div gt  x000D   x000D   x000D     Show an arbitrary  tooltip      x000D   x000D   wrap   x000D    position  relative  x000D    x000D   x000D   overflow   x000D    white-space  nowrap   x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D     x000D    pointer-events none  x000D    x000D   x000D   overflow after   x000D    content     x000D    display  block  x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    width  20px  x000D    height  15px  x000D    z-index  1  x000D    border  1px solid red     for visualization only    x000D    pointer-events initial  x000D   x000D    x000D   x000D   overflow hover after  x000D    cursor  pointer  x000D    x000D   x000D   tooltip   x000D       visibility  hidden     x000D    display  none  x000D    position  absolute  x000D    top  10  x000D    left  0  x000D    background-color   fff  x000D    padding  10px  x000D    -webkit-box-shadow  0 0 50px 0 rgba 0 0 0 0 3   x000D    opacity  0  x000D    transition  opacity 0 5s ease  x000D    x000D   x000D   x000D   overflow hover    tooltip   x000D      visibility  visible     x000D    display  initial  x000D    transition  opacity 0 5s ease  x000D    opacity  1  x000D    x000D   lt div gt  x000D     lt span class  wrap  gt  x000D       lt span class  overflow  style  float  left  width  50px  gt Long text that might overflow lt  span gt  x000D       lt span class  tooltip  gt Long text that might overflow  lt  span gt  x000D     lt  span gt  x000D    Lorem ipsum dolor sit amet  consectetur adipisicing elit  Ad recusandae perspiciatis accusantium quas aut explicabo ab  Doloremque quam eos  alias dolore  iusto pariatur earum  ullam  quidem dolores deleniti perspiciatis omnis  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

None of the solutions above worked for me  but I figured out a great solution  The biggest mistake people are making is having all the 3 CSS properties declared on the element upon pageload  You have to add those styles tooltip dynamically IF and ONLY IF the span you want an ellipses on is wider than its parent          table   each function            var content     this  find  span   text            var span     this  find  span            var td     this  find  td            var styles                  text-overflow   ellipsis                white-space   nowrap                overflow   hidden                display   block                width    auto                     if  span width    gt  td width                 span css styles                   tooltip                   trigger   hover                   html  true                  title  content                  placement   bottom

User · Answer

This is what I did   Most tooltip scripts require you to execute a function that stores the tooltips   This is a jQuery example     when        filter function        return   this  css  text-overflow       ellipsis      each function        if  this offsetWidth  lt  this scrollWidth  amp  amp     this  attr  title              this  attr  title     this  text              done function        setupTooltip          If you didn t want to check for ellipsis css  you could simplify like     when        filter function        return  this offsetWidth  lt  this scrollWidth  amp  amp     this  attr  title        each function          this  attr  title     this  text         done function        setupTooltip          I have the  when  around it  so that the  setupTooltip  function doesn t execute until all titles have been updated   Replace the  setupTooltip   with your tooltip function and the   with the elements you want to check     will go through them all if you leave it   If you simply want to just update the title attributes with the browsers tooltip  you can simplify like          filter function        return   this  css  text-overflow       ellipsis      each function        if  this offsetWidth  lt  this scrollWidth  amp  amp     this  attr  title              this  attr  title     this  text                Or without check for ellipsis     when        filter function        return  this offsetWidth  lt  this scrollWidth  amp  amp     this  attr  title        each function          this  attr  title     this  text

User · Answer

You could possibly surround the span with another span  then simply test if the width of the original inner span is greater than that of the new outer span   Note that I say possibly -- it is roughly based on my situation where I had a span inside of a td so I don t actually know that if it will work with a span inside of a span     Here though is my code for others who may find themselves in a position similar to mine  I m copying pasting it without modification even though it is in an Angular context  I don t think that detracts from the readability and the essential concept   I coded it as a service method because I needed to apply it in more than one place   The selector I ve been passing in has been a class selector that will match multiple instances   CaseService applyTooltip   function selector        angular element selector  on  mouseenter   function            var td     this          var span   td find  span             if   span attr  tooltip-computed                    compute just once             span attr  tooltip-computed   1                 if  span width    gt  td width                     span attr  data-toggle   tooltip                    span attr  data-placement   right                    span attr  title   span html

[javascript] HTML - how can I show tooltip ONLY when ellipsis is activated

Examples related to javascript

Examples related to html

Examples related to css

Examples related to tooltip

Examples related to ellipsis