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

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

I have got a span with dynamic data in my page that contain ellipsis. Meaning:
${myData}

and I’d like to add to this element tooltip with the same content (title=’${myData}’) 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?
one direction – when the browser (IE in my case) draw ellipsis- does it throw an event about it?

Solutions/Answers:

Solution 1:

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

Solution 2:

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

Solution 3:

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.

Related:  Is javascript window.location crossbrowser?

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

Solution 4:

Here is my jQuery plugin:

(function($) {
    'use strict';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < 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

Solution 5:

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.

Related:  How to encode a query string so that it is the value of another query string in javascript?

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

I found a way to improve ellipsis detection:

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

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

Solution 6:

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