HTML - jak mogę wyświetlać podpowiedzi TYLKO, gdy aktywna jest elipsa

Mam zakres z dynamicznymi danymi na mojej stronie, ze ellipsisstylem.

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

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

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

Chciałbym dodać do tego elementu etykietę narzędzia o tej samej treści, ale chcę, aby pojawiała się tylko wtedy, gdy zawartość jest długa, a na ekranie pojawia się wielokropek.

Czy jest na to jakiś sposób?
Czy przeglądarka generuje zdarzenie, gdy ellipsisjest aktywowane?

* Przeglądarka: Internet Explorer

Oto sposób, w jaki robi to za pomocą wbudowanego ustawienia wielokropka i dodaje titleatrybut na żądanie (z jQuery) w oparciu o komentarz Martina Smitha:

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

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

Oto czyste rozwiązanie CSS. Nie potrzebujesz jQuery. Nie będzie wyświetlać podpowiedzi, zamiast tego powiększy zawartość do pełnej długości po najechaniu myszką.

Działa świetnie, jeśli masz treści, które zostaną zastąpione. Nie musisz wtedy uruchamiać funkcji jQuery za każdym razem.

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

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

Odpowiedź uosɐſ jest zasadniczo poprawna, ale prawdopodobnie nie chcesz tego robić w przypadku zdarzenia w centrum myszy. Spowoduje to, że wykona obliczenia, aby określić, czy jest ono potrzebne, za każdym razem, gdy najedziesz myszką na element. O ile rozmiar elementu się nie zmieni, nie ma powodu, aby to robić.

Lepiej byłoby po prostu wywołać ten kod natychmiast po dodaniu elementu do DOM:

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

Lub, jeśli nie wiesz, kiedy dokładnie został dodany, wywołaj ten kod po zakończeniu ładowania strony.

jeśli masz więcej niż jeden element, z którym musisz to zrobić, możesz nadać im tę samą klasę (np. „mayOverflow”) i użyć tego kodu, aby zaktualizować je wszystkie:

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

Oto dwa inne rozwiązania oparte wyłącznie na CSS:

1. Pokaż obcięty tekst w miejscu:

.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. Pokaż dowolną „etykietkę” :

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

Oto moja wtyczka 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);

Stosowanie:

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

Edytować:

Zrobiłem sedno dla tej wtyczki. https://gist.github.com/UziTech/d45102cdffb1039d4415

Musimy wykryć, czy elipsa jest rzeczywiście zastosowana, a następnie pokazać etykietkę narzędzia, aby odsłonić pełny tekst. Nie wystarczy tylko porównywać „ this.offsetWidth < this.scrollWidth”, gdy element prawie trzyma zawartość, ale brakuje tylko jednego lub dwóch dodatkowych pikseli szerokości, szczególnie dla tekstu chińskich / japońskich / koreańskich znaków o pełnej szerokości.

Oto przykład: http://jsfiddle.net/28r5D/5/

Znalazłem sposób, aby poprawić wykrywanie elipsy:

1. this.offsetWidth < this.scrollWidthNajpierw porównaj „ ”, kontynuuj krok 2, jeśli się nie powiedzie.
2. Tymczasowo przełącz styl css na {„przepełnienie”: „widoczne”, „biała spacja”: „normalny”, „podział słów”: „wszystkie”.
3. Pozwól przeglądarce dokonać przekazywania. Jeśli dzieje się zawijanie słów, element powiększy swoją wysokość, co oznacza również, że wymagana jest elipsa.
4. Przywróć styl css.

Oto moje ulepszenie: http://jsfiddle.net/28r5D/6/

Stworzyłem wtyczkę jQuery, która używa podpowiedzi Bootstrap zamiast podpowiedzi przeglądarki. Pamiętaj, że nie zostało to przetestowane ze starszą przeglądarką.

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

Oto co zrobiłem. Większość skryptów podpowiedzi wymaga wykonania funkcji przechowującej podpowiedzi. To jest przykład 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();
});

Jeśli nie chcesz sprawdzać ellipsis css, możesz uprościć:

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

Mam wokół niego „kiedy”, więc funkcja „setupTooltip” nie działa, dopóki wszystkie tytuły nie zostaną zaktualizowane. Zamień „setupTooltip” na funkcję podpowiedzi, a * na elementy, które chcesz sprawdzić. * przejdzie je wszystkie, jeśli go opuścisz.

Jeśli chcesz po prostu zaktualizować atrybuty tytułu za pomocą podpowiedzi przeglądarki, możesz uprościć:

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

Lub bez sprawdzania elipsy:

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

Jeśli chcesz to zrobić wyłącznie przy użyciu javascript, zrobiłbym następujące. Nadaj zakresowi atrybut id (aby można go było łatwo pobrać z DOM) i umieść całą zawartość w atrybucie o nazwie „content”:

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

Następnie w javascript możesz wykonać następujące czynności po wstawieniu elementu do 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); 
}

Oczywiście, jeśli używasz javascript do wstawiania zakresu do DOM, możesz po prostu zachować zawartość w zmiennej przed wstawieniem. W ten sposób nie potrzebujesz atrybutu treści w zakresie.

Są bardziej eleganckie rozwiązania, jeśli chcesz używać jQuery.

Mam klasę CSS, która określa, gdzie umieścić elipsę. Na tej podstawie robię następujące (zestaw elementów może być inny, piszę te, w których używana jest elipsa, oczywiście może to być osobny selektor klasy):

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

Oto rozwiązanie 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>

To było moje rozwiązanie, działa jak urok!

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

Żadne z powyższych rozwiązań nie działało dla mnie, ale wymyśliłem świetne rozwiązanie. Największym błędem, jaki popełniają ludzie, jest zadeklarowanie wszystkich 3 właściwości CSS w elemencie podczas ładowania strony. Musisz dodać te style + etykietkę dynamicznie JEŻELI i TYLKO JEŚLI zakres, na którym chcesz elips, jest szerszy niż jego element nadrzędny.

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

Możesz ewentualnie otoczyć przęsło innym przęsłem, a następnie po prostu sprawdź, czy szerokość pierwotnego / wewnętrznego przęsła jest większa niż szerokość nowego / zewnętrznego przęsła. Zauważ, że mówię, że możliwe - jest to mniej więcej oparte na mojej sytuacji, w której miałem spanwnętrze, tdwięc nie wiem, czy to będzie działać z spanwnętrzem span.

Oto mój kod dla innych, którzy mogą znaleźć się w pozycji podobnej do mojej; Kopiuję / wklejam go bez modyfikacji, nawet jeśli jest to w kontekście Angular, nie sądzę, że szkodzi to czytelności i podstawowej koncepcji. Zakodowałem to jako metodę usługi, ponieważ musiałem zastosować go w więcej niż jednym miejscu. Selektor, który przekazałem, był selektorem klasy, który będzie pasował do wielu instancji.

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