HTML - Wie kann ich Tooltip NUR anzeigen, wenn die Auslassungspunkte aktiviert sind?

Ich habe eine Spanne mit dynamischen Daten auf meiner Seite, mit ellipsisStil.

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

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

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

Ich möchte diesem Element einen Tooltip mit demselben Inhalt hinzufügen, aber ich möchte, dass er nur angezeigt wird, wenn der Inhalt lang ist und die Auslassungspunkte auf dem Bildschirm angezeigt werden.

Gibt es eine Möglichkeit, dies zu tun?
Löst der Browser ein Ereignis aus, wenn ellipsises aktiviert ist?

* Browser: Internet Explorer

Hier ist eine Möglichkeit, die mithilfe der integrierten Ellipseneinstellung erfolgt und das titleAttribut On-Demand (mit jQuery) auf der Grundlage von Martin Smiths Kommentar hinzufügt :

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

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

Hier ist eine reine CSS-Lösung. Keine Notwendigkeit für jQuery. Es wird kein Tooltip angezeigt, sondern der Inhalt wird beim Mouseover nur auf seine volle Länge erweitert.

Funktioniert hervorragend, wenn Sie Inhalte haben, die ersetzt werden. Dann müssen Sie nicht jedes Mal eine jQuery-Funktion ausführen.

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

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

Die Antwort von uosɐſ ist grundsätzlich richtig, aber Sie möchten sie wahrscheinlich nicht im mouseenter-Ereignis tun. Dies führt dazu, dass die Berechnung jedes Mal durchgeführt wird, um festzustellen, ob sie benötigt wird, wenn Sie mit der Maus über das Element fahren. Wenn sich die Größe des Elements nicht ändert, gibt es keinen Grund, dies zu tun.

Es ist besser, diesen Code sofort nach dem Hinzufügen des Elements zum DOM aufzurufen:

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

Wenn Sie nicht genau wissen, wann es hinzugefügt wurde, rufen Sie diesen Code auf, nachdem die Seite vollständig geladen wurde.

Wenn Sie mehr als ein einzelnes Element haben, mit dem Sie dies tun müssen, können Sie allen dieselbe Klasse geben (z. B. "mayOverflow") und diesen Code verwenden, um sie alle zu aktualisieren:

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

Hier sind zwei weitere reine CSS-Lösungen:

1. Zeigen Sie den abgeschnittenen Text an Ort und Stelle an:

.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. Zeigen Sie einen beliebigen "Tooltip" an :

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

Hier ist mein jQuery-Plugin:

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

Verwendung:

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

Bearbeiten:

Ich habe einen Kern für dieses Plugin gemacht. https://gist.github.com/UziTech/d45102cdffb1039d4415

Wir müssen erkennen, ob die Auslassungspunkte wirklich angewendet werden, und dann einen Tooltip anzeigen, um den Volltext anzuzeigen. Es reicht nicht aus, nur " this.offsetWidth < this.scrollWidth" zu vergleichen, wenn das Element fast seinen Inhalt enthält, sondern nur ein oder zwei weitere Pixel in der Breite fehlen, insbesondere für den Text von chinesischen / japanischen / koreanischen Zeichen in voller Breite.

Hier ist ein Beispiel: http://jsfiddle.net/28r5D/5/

Ich habe einen Weg gefunden, die Ellipsenerkennung zu verbessern:

1. Vergleichen Sie zuerst " this.offsetWidth < this.scrollWidth" und fahren Sie mit Schritt 2 fort, falls dies fehlschlägt.
2. Schalten Sie den CSS-Stil zeitlich auf {'Überlauf': 'sichtbar', 'Leerraum': 'normal', 'Wortumbruch': 'Umbruch'}.
3. Lassen Sie den Browser Relayout ausführen. Wenn ein Zeilenumbruch stattfindet, erweitert das Element seine Höhe, was auch bedeutet, dass Auslassungspunkte erforderlich sind.
4. Stellen Sie den CSS-Stil wieder her.

Hier ist meine Verbesserung: http://jsfiddle.net/28r5D/6/

Ich habe ein jQuery-Plugin erstellt, das den Tooltip von Bootstrap anstelle des integrierten Tooltips des Browsers verwendet. Bitte beachten Sie, dass dies nicht mit einem älteren Browser getestet wurde.

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

Das habe ich getan. Bei den meisten Tooltip-Skripten müssen Sie eine Funktion ausführen, in der die Tooltips gespeichert sind. Dies ist ein jQuery-Beispiel:

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

Wenn Sie nicht nach Auslassungspunkten suchen möchten, können Sie Folgendes vereinfachen:

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

Ich habe das "Wann" um mich herum, so dass die "setupTooltip" -Funktion erst ausgeführt wird, wenn alle Titel aktualisiert wurden. Ersetzen Sie den "setupTooltip" durch Ihre Tooltip-Funktion und das * durch die Elemente, die Sie überprüfen möchten. * wird sie alle durchgehen, wenn Sie es verlassen.

Wenn Sie einfach nur die Titelattribute mit dem Tooltip des Browsers aktualisieren möchten, können Sie Folgendes vereinfachen:

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

Oder ohne Überprüfung auf Auslassungspunkte:

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

Wenn Sie dies ausschließlich mit Javascript tun möchten, würde ich Folgendes tun. Geben Sie dem Bereich ein ID-Attribut (damit es leicht aus dem DOM abgerufen werden kann) und platzieren Sie den gesamten Inhalt in einem Attribut mit dem Namen "Inhalt":

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

In Ihrem Javascript können Sie dann Folgendes tun, nachdem das Element in das DOM eingefügt wurde.

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

Wenn Sie Javascript verwenden, um den Bereich in das DOM einzufügen, können Sie den Inhalt natürlich vor dem Einfügen in einer Variablen belassen. Auf diese Weise benötigen Sie kein Inhaltsattribut für den Bereich.

Es gibt elegantere Lösungen als diese, wenn Sie jQuery verwenden möchten.

Ich habe eine CSS-Klasse, die bestimmt, wo Auslassungspunkte gesetzt werden sollen. Basierend darauf mache ich Folgendes (Elementmenge könnte unterschiedlich sein, ich schreibe diejenigen, bei denen Auslassungspunkte verwendet werden, natürlich könnte es ein separater Klassenselektor sein):

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

Hier ist eine Vanilla JavaScript-Lösung:

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

Das war meine Lösung, wirkt wie ein Zauber!

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

Keine der oben genannten Lösungen hat bei mir funktioniert, aber ich habe eine großartige Lösung gefunden. Der größte Fehler, den Menschen machen, besteht darin, dass alle 3 CSS-Eigenschaften beim Laden der Seite für das Element deklariert werden. Sie müssen diese Stile + QuickInfo dynamisch hinzufügen, WENN und NUR WENN die Spanne, auf der Ellipsen angezeigt werden sollen, breiter ist als die übergeordnete.

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

Sie könnten die Spanne möglicherweise mit einer anderen Spanne umgeben und dann einfach testen, ob die Breite der ursprünglichen / inneren Spanne größer als die der neuen / äußeren Spanne ist. Beachten Sie, dass ich möglicherweise sage - es basiert ungefähr auf meiner Situation, in der ich ein spanInneres von a hatte, tdalso weiß ich nicht wirklich, ob es mit einem spanInneren von a funktioniert span.

Hier ist jedoch mein Code für andere, die sich möglicherweise in einer ähnlichen Position wie ich befinden. Ich kopiere / füge es ohne Änderung ein, obwohl es sich in einem Winkelkontext befindet. Ich denke nicht, dass dies die Lesbarkeit und das wesentliche Konzept beeinträchtigt. Ich habe es als Servicemethode codiert, weil ich es an mehr als einer Stelle anwenden musste. Der Selektor, den ich übergeben habe, war ein Klassenselektor, der mehreren Instanzen entspricht.

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