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

У меня есть диапазон с динамическими данными на моей странице, со ellipsisстилем.

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

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

Есть ли способ сделать это?
Браузер выбрасывает событие при ellipsisактивации?

* Браузер: Internet Explorer

Вот способ, который делает это, используя встроенный параметр многоточия, и добавляет 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;
}

Ответ 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());
});

Вот два других чистых решения 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>

Вот мой плагин 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");
      }
    }
  });
};

Это то, что я сделал. Большинство сценариев подсказок требуют, чтобы вы выполняли функцию, которая хранит подсказки. Это пример 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());
});

Если вы хотите сделать это исключительно с помощью JavaScript, я бы сделал следующее. Задайте для атрибута span атрибут 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.

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

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

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

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

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

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

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

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