Всплывающая подсказка не отображается при наведении заголовка таблицы в Internet Explorer

Question

Всплывающая подсказка не отображается при наведении заголовка таблицы только в Internet Explorer.

Hello. У меня проблема с сеткой в ​​IE. Я строю всплывающую подсказку с внутренним текстом с помощью селектора jQuery, который копирует текст из цели. Он должен копировать этот текст только тогда, когда элемент имеет атрибут «многоточие» и это текст не отображается полностью в строке.

Часть селектора jQuery:

  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;

Он работает в Chrome, а я наведите курсор на заголовок таблицы, но в IE он работает только для элементов td и не работает для элементов таблицы. Я попытался добавить пробел: nowrap; к элементам th и table-layout: fixed; для самой таблицы, но она не работала.

Answer 1

Проблема связана с браузером IE и Edge. Они читают, что ширина элемента отличается от других браузеров, и браузер думал, что весь текст отображается даже в том случае, когда текст был многоточным (только в этом случае должна отображаться подсказка). Проблема была довольно хитрой, потому что всплывающая подсказка не появлялась при заголовке таблицы. Чтобы это исправить, нужно было добавить дополнительный символ ко всему тексту, чтобы обмануть IE и Edge, как здесь:

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