HTML - как я могу показать всплывающую подсказку ТОЛЬКО при активации многоточия

Question

На моей странице есть диапазон с динамическими данными, которые содержат многоточие. Значение:

<span style='text-overflow: ellipsis; overflow : hidden; white-space: nowrap;  
 width: 71;'>${myData}</span>

и я хотел бы добавить к этому элементу всплывающую подсказку с тем же содержимым (title = '$ {myData}'), но я хочу, чтобы она отображалась только тогда, когда содержимое длинное и многоточие отображается на экране.
Есть ли способ сделать это?

в одном направлении - когда браузер (в моем случае IE) рисует многоточие - вызывает ли это событие?

Answer 1

Это было мое решение, работает как шарм!

    $(document).on('mouseover', 'input, span', function() {
      var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
      var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
      if (needEllipsis === true) {
          if(hasNotTitleAttr === true){
            $(this).attr('title', $(this).val());
          }
      }
      if(needEllipsis === false && hasNotTitleAttr == false){
        $(this).removeAttr('title');
      }
  });

Answer 2

Вот решение Vanilla JavaScript:

(function init() {

  var cells = document.getElementsByClassName("cell");

  for(let index = 0; index < cells.length; ++index) {
    let cell = cells.item(index);
    cell.addEventListener('mouseenter', setTitleIfNecessary, false);
  }

  function setTitleIfNecessary() {
    if(this.offsetWidth < this.scrollWidth) {
      this.setAttribute('title', this.innerHTML);
    }
  }

})();

.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px;
  border-style: solid;
  width: 120px; 
}

<div class="cell">hello world!</div>
<div class="cell">hello mars! kind regards, world</div>

Answer 3

Возможно, вы можете окружить диапазон другим диапазоном, а затем просто проверить, больше ли ширина исходного / внутреннего диапазона, чем ширина нового / внешнего диапазона. Обратите внимание, что я говорю, возможно, - это примерно основано на моей ситуации, когда у меня было span внутри td, поэтому я на самом деле не знаю, будет ли он работать с span внутри span ,

Вот мой код для тех, кто может оказаться в положении, аналогичном моему; Я копирую / вставляю это без изменений, даже если это в угловом контексте, я не думаю, что это умаляет удобочитаемость и основную концепцию. Я кодировал его как метод обслуживания, потому что мне нужно было применять его более чем в одном месте. Селектор, который я передавал, был селектором класса, который будет соответствовать нескольким экземплярам.

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on('mouseenter', function(){
        var td = $(this)
        var span = td.find('span');

        if (!span.attr('tooltip-computed')) {
            //compute just once
            span.attr('tooltip-computed','1');

            if (span.width() > td.width()){
                span.attr('data-toggle','tooltip');
                span.attr('data-placement','right');
                span.attr('title', span.html());
            }
        }
    });
}

Answer 4

Ни одно из вышеперечисленных решений не помогло мне, но я нашел отличное решение.Самая большая ошибка, которую делают люди, - это все 3 свойства CSS, объявленные в элементе при загрузке страницы.Вы должны добавить эти стили + всплывающую подсказку динамически, ЕСЛИ и ТОЛЬКО ЕСЛИ диапазон, на котором вы хотите создать эллипсы, шире, чем его родительский элемент.

    $('table').each(function(){
        var content = $(this).find('span').text();
        var span = $(this).find('span');
        var td = $(this).find('td');
        var styles = {
            'text-overflow':'ellipsis',
            'white-space':'nowrap',
            'overflow':'hidden',
            'display':'block',
            'width': 'auto'
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: 'hover',
                html: true,
                title: content,
                placement: 'bottom'
            });
        }
    });