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

Вот способ, который делает это с помощью встроенной настройки многоточия и добавляет атрибут title по запросу (с jQuery) на основе комментария Мартина Смита:

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

Вот чистое решение CSS. Нет необходимости в jQuery. Он не отображает всплывающую подсказку, вместо этого он просто расширяет содержимое до его полной длины при наведении курсора.

Отлично работает, если у вас есть контент, который нужно заменить. Тогда вам не нужно каждый раз запускать функцию jQuery.

.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

Вот два других решения на чистом CSS:

1. Показать усеченный текст на месте:

.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>

2. Показать произвольный " подсказка ":

.wrap {
  position: relative;
}

.overflow {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  
  pointer-events:none;
}

.overflow:after {
  content:"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 15px;
  z-index: 1;
  border: 1px solid red; /* for visualization only */
  pointer-events:initial;

}

.overflow:hover:after{
  cursor: pointer;
}

.tooltip {
  /* visibility: hidden; */
  display: none;
  position: absolute;
  top: 10;
  left: 0;
  background-color: #fff;
  padding: 10px;
  -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.5s ease;
}


.overflow:hover + .tooltip {
  /*visibility: visible; */
  display: initial;
  transition: opacity 0.5s ease;
  opacity: 1;
}

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

Ответ uosɐſ в основном правильный, но вы, вероятно, не захотите делать это в событии mouseenter. Это заставит его выполнять вычисления, чтобы определить, нужно ли это, каждый раз, когда вы наводите указатель мыши на элемент. Если размер элемента не меняется, нет причин для этого.

Было бы лучше просто вызвать этот код сразу после добавления элемента в DOM:

var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

Или, если вы не знаете, когда именно он был добавлен, вызовите этот код после завершения загрузки страницы.

если у вас есть более одного элемента, с которым вам нужно это сделать, то вы можете дать им один и тот же класс (например, mightOverflow) и использовать этот код для обновления их всех:

$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});

Вот мой плагин jQuery:

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

Использование:

$("td, th").tooltipOnOverflow();

Редактировать:

Я понял суть этого плагина. https://gist.github.com/UziTech/d45102cdffb1039d4415

Нам нужно определить, действительно ли применено многоточие, а затем показать всплывающую подсказку для отображения полного текста. Недостаточно просто сравнить "this.offsetWidth < this.scrollWidth", когда элемент почти удерживает свое содержимое, но ему не хватает только одного или двух пикселей по ширине, особенно для текста с полноразмерными китайскими / японскими / корейскими символами.

Вот пример: http://jsfiddle.net/28r5D/5/

Я нашел способ улучшить обнаружение многоточия:

1. Сначала сравните "this.offsetWidth < this.scrollWidth", в случае неудачи продолжите шаг 2.
2. Временное переключение стиля css на {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}.
3. Разрешить браузеру выполнить ретрансляцию. Если происходит перенос слов, высота элемента увеличивается, что также означает, что требуется многоточие.
4. Восстановить стиль css.

Вот мое улучшение: http://jsfiddle.net/28r5D/6/

Я создал плагин jQuery, который использует всплывающую подсказку Bootstrap вместо встроенной всплывающей подсказки браузера. Обратите внимание, что это не было протестировано со старым браузером.

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

Вот решение 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>

Если вы хотите сделать это исключительно с помощью javascript, я бы сделал следующее. Дайте диапазону атрибут id (чтобы его можно было легко извлечь из DOM) и поместите все содержимое в атрибут с именем content:

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

Затем в вашем javascript вы можете сделать следующее после того, как элемент был вставлен в DOM.

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute('title', elemContent); 
}

Конечно, если вы используете javascript для вставки диапазона в DOM, вы можете просто сохранить содержимое в переменной перед его вставкой. Таким образом, вам не нужен атрибут содержимого в диапазоне.

Если вы хотите использовать jQuery, есть более элегантные решения.

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

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

Вот что я сделал. Большинство сценариев всплывающих подсказок требуют, чтобы вы выполнили функцию, которая хранит всплывающие подсказки. Это пример jQuery:

$.when($('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

Если вы не хотите проверять многоточие css, вы можете упростить, например:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

У меня есть «когда», так что функция «setupTooltip» не выполняется, пока не будут обновлены все заголовки. Замените «setupTooltip» своей функцией всплывающей подсказки, а * - элементами, которые вы хотите проверить. * пройдёт через все, если вы оставите это.

Если вы просто хотите просто обновить атрибуты заголовка с помощью всплывающей подсказки браузера, вы можете упростить, например:

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

Или без проверки на многоточие:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
});

У меня есть класс CSS, который определяет, где поставить многоточие. Исходя из этого, я делаю следующее (набор элементов может быть другим, я пишу те, где используется многоточие, конечно, это может быть отдельный селектор классов):

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

Это то, что я в итоге сделал на основе https://stackoverflow.com/a/13259660/1714951 и добавления удаления атрибута title, когда элемент больше не переполняется. Это чистый JS (ES6), использует делегирование событий для повышения производительности (при использовании нескольких элементов с одним и тем же классом) и защитные предложения для удобства чтения:

// You may want to change document by an element closer to your target
// so that the handler is not executed as much
document.addEventListener( 'mouseenter', event => {
    let eventTarget = event.target;
    // This could be easily applied to text-truncate instead of my-class if you use bootstrap
    if ( !eventTarget.classList?.contains( 'my-class' ) ) {
        return;
    }
    if ( eventTarget.offsetWidth < eventTarget.scrollWidth ) {
        eventTarget.setAttribute( 'title', eventTarget.innerText );
        return;
    }
    eventTarget.removeAttribute( 'title' );
}, true );

Ни одно из вышеперечисленных решений не помогло мне, но я нашел отличное решение. Самая большая ошибка, которую делают люди, - это то, что все 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'
            });
        }
    });

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

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

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