0

Is it possible to show a tooltip when the content can't fit inside the element? Using title attribute shows the tooltip regardless.

I've googled some examples, but there was nothing about tooltip showing conditions.

In this example I want to see the tooltip only when the text is too long: 

.limiter
{
  width: 100px;
}

.container
{
  margin: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}
<div class="limiter">
<div>Hover cells:</div>
<div class="container" title="short text">short text</div>
<div class="container" title="short">short</div>
<div class="container" title="long text long text long text">long text long text long text</div>
</div>

It is possible to use JavaScript.

Limitations:

  • I don't know in advance, what text a cell will contain (basically it's a template for angularjs)
  • I don't know in advance, what number of letters can it display
  • User can resize cells
enkryptor
  • 1,391
  • 1
  • 14
  • 24
  • 2
    Basically, you want to detect ellipsis. Check out this answer: http://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection – BassMHL Sep 08 '16 at 13:51
  • 1
    You can perform a calculation of the total content length and compare that to the element's length in the DOM, showing the tooltip in case it is needed. You would probably need an attribute directive on that element with a watcher set to observe the content changes and perform the calculation accordingly. – Bruno Toffolo Sep 08 '16 at 13:51
  • @BassemLhm that was years ago. Isn't there any easier way nowadays? (using angular, perhaps) – enkryptor Sep 08 '16 at 13:59
  • What Bruno said is correct. There are some JS plugins that create hidden spans, mirroring your text content, only to measure their width, and then check if it fits within your parent and act accordingly. But they won't probably work dynamically in Angular - you need to create your own or find a library that does something similar. – Senthe Sep 08 '16 at 14:45
  • @Senthe what surprises me, is that you must do the width-height comparations via JS, regardless of it already has been done by the browser for the `text-overflow: ellipsis` style – enkryptor Sep 08 '16 at 15:28
  • @enkryptor Yes, but we don't have any `:ellipsized` selector, so there's no way for CSS to make any other use of this calculation. – Senthe Sep 09 '16 at 23:49

0 Answers0