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

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 < this.scrollWidth && !$this.attr('title')){        $this.attr('title', $this.text());    }});

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

Here are two other pure CSS solutions:

1. Show the truncated text in place:

.overflow {  overflow: hidden;  -ms-text-overflow: ellipsis;  text-overflow: ellipsis;  white-space: nowrap;}.overflow:hover {  overflow: visible;}.overflow:hover span {  position: relative;  background-color: white;  box-shadow: 0 0 4px 0 black;  border-radius: 1px;}

<div>  <span class="overflow" style="float: left; width: 50px">    <span>Long text that might overflow.</span>  </span>  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.</div>