Tooltip does not appear when hover table header on Internet Explorer

Question

Tooltip does not appear when hover table header on Internet Explorer only.

Hello. I have a problem problem with grid on IE. I build a tooltip with inner text with jQuery selector, which copies text from the target. It should copy this text only when element has a "ellipsis" attribute and this text doesn't appear fully on the row.

Part of jQuery selector:

  var target = e.target,
                tooltip = e.sender,
                tooltipText = "";

            if (target[0].offsetWidth < target[0].scrollWidth) {
                tooltipText = target[0].value || target[0].innerText;
            }

            tooltip.popup.unbind("open");
            tooltip.popup.bind("open", function (arg) {
                tooltip.refreshTooltip = false;
                if (target[0].offsetWidth > target[0].scrollWidth || tooltipText === "") {
                    arg.preventDefault();
                } else if (tooltipText !== target[0].value && tooltipText !== target[0].innerText) {
                    tooltip.refreshTooltip = true;
                }
            });

            return tooltipText;

It does work on Chrome, while I hover table header but on IE it works only for td elements and it doesn't work for th elements of the table. I have tried to add white-space:nowrap; to the th elements and table-layout:fixed; for the table itself but it didn't work.

Answer 1

The problem is related to IE and Edge browser (versions before Chromium engine). They read that width of element is different than in other browsers and browser was thinking that, whole text is displayed, even in case when text was ellipsis (only in that case tooltip should be displayed). The problem was quite tricky, because tooltip didn't appear while hoover tables's header. To fix this it was needed to add extra character to whole text to fool IE and Edge, like here:

 var appendHeaderText = function (element) {
        if ($.isIE() || $.isEdge()) {
            element.childNodes[0].innerText += "_";
        }            
    };

var removeHeaderText = function (element) {
        if ($.isIE() || $.isEdge()) {
            var text = element.childNodes[0].innerText;
            element.childNodes[0].innerText = text.slice(0, text.length - 1);
        }
    };

        e.sender.thead.setTooltip("th", true, appendHeaderText, removeHeaderText);