HTML: come posso mostrare il tooltip SOLO quando sono attivati ​​i puntini di sospensione

Ho una spanna con dati dinamici nella mia pagina, con ellipsisstile.

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

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

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

Vorrei aggiungere a questo elemento una descrizione comandi con lo stesso contenuto, ma voglio che appaia solo quando il contenuto è lungo e i puntini di sospensione appaiono sullo schermo.

C'è modo di farlo?
Il browser genera un evento quando ellipsisè attivato?

* Browser: Internet Explorer

Ecco un modo che lo fa utilizzando l'impostazione dei puntini di sospensione integrata e aggiunge l' titleattributo on demand (con jQuery) basandosi sul commento di Martin Smith:

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

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

Ecco una soluzione CSS pura. Non è necessario per jQuery. Non mostrerà una descrizione comandi, invece espanderà il contenuto per tutta la sua lunghezza al passaggio del mouse.

Funziona alla grande se hai contenuti che vengono sostituiti. Quindi non è necessario eseguire una funzione jQuery ogni volta.

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

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

La risposta di uosɐſ è fondamentalmente corretta, ma probabilmente non vorrai farlo nell'evento mouseenter. Questo farà sì che esegua il calcolo per determinare se è necessario, ogni volta che passi il mouse sull'elemento. A meno che la dimensione dell'elemento non cambi, non c'è motivo di farlo.

Sarebbe meglio chiamare questo codice immediatamente dopo aver aggiunto l'elemento al DOM:

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

Oppure, se non sai quando viene aggiunto esattamente, chiama quel codice al termine del caricamento della pagina.

se hai più di un singolo elemento con cui devi farlo, puoi dare loro tutti la stessa classe (come "mightOverflow") e usare questo codice per aggiornarli tutti:

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

Ecco altre due soluzioni CSS pure:

1. Mostra il testo troncato sul posto:

.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. Mostra una "descrizione comandi" arbitraria :

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

Ecco il mio plugin 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);

Uso:

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

Modificare:

Ho fatto un'idea per questo plugin. https://gist.github.com/UziTech/d45102cdffb1039d4415

Dobbiamo rilevare se i puntini di sospensione sono realmente applicati, quindi mostrare una descrizione comando per rivelare il testo completo. Non è sufficiente confrontando " this.offsetWidth < this.scrollWidth" solo quando l'elemento contiene quasi il suo contenuto ma manca solo uno o due pixel in più di larghezza, specialmente per il testo di caratteri cinesi / giapponesi / coreani a larghezza intera.

Ecco un esempio: http://jsfiddle.net/28r5D/5/

Ho trovato un modo per migliorare il rilevamento dei puntini di sospensione:

1. Confronta this.offsetWidth < this.scrollWidthprima " ", continua il passaggio 2 se fallito.
2. Passa lo stile CSS temporaneamente a {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}.
3. Consenti al browser di eseguire il relayout. Se si verifica un ritorno a capo automatico, l'elemento espande la sua altezza, il che significa anche che sono necessarie le ellissi.
4. Ripristina lo stile CSS.

Ecco il mio miglioramento: http://jsfiddle.net/28r5D/6/

Ho creato un plug-in jQuery che utilizza la descrizione comandi di Bootstrap anziché la descrizione comandi incorporata del browser. Si noti che questo non è stato testato con un browser precedente.

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

Questo è quello che ho fatto. La maggior parte degli script dei suggerimenti richiede di eseguire una funzione che memorizza i suggerimenti. Questo è un esempio di 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();
});

Se non si desidera verificare la presenza di ellissi css, è possibile semplificare come:

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

Ho il "quando" attorno ad esso, in modo che la funzione "setupTooltip" non venga eseguita fino a quando tutti i titoli non sono stati aggiornati. Sostituisci "setupTooltip", con la tua funzione tooltip e il * con gli elementi che vuoi controllare. * li esaminerà tutti se lo lasci.

Se desideri semplicemente aggiornare gli attributi del titolo con la descrizione del browser, puoi semplificare come:

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

O senza controllo per i puntini di sospensione:

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

Se vuoi farlo solo usando JavaScript, farei quanto segue. Assegna allo span un attributo id (in modo che possa essere facilmente recuperato dal DOM) e posiziona tutto il contenuto in un attributo chiamato "content":

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

Quindi, nel tuo javascript, puoi fare quanto segue dopo che l'elemento è stato inserito nel 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); 
}

Naturalmente, se stai utilizzando JavaScript per inserire l'intervallo nel DOM, puoi semplicemente mantenere il contenuto in una variabile prima di inserirlo. In questo modo non è necessario un attributo content sull'intervallo.

Ci sono soluzioni più eleganti di questa se vuoi usare jQuery.

Ho una classe CSS, che determina dove posizionare i puntini di sospensione. Sulla base di ciò, faccio quanto segue (l'insieme di elementi potrebbe essere diverso, scrivo quelli, in cui vengono utilizzati i puntini di sospensione, ovviamente potrebbe essere un selettore di classe separato):

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

Ecco una soluzione JavaScript Vanilla:

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

Questa era la mia soluzione, funziona come un fascino!

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

Nessuna delle soluzioni sopra ha funzionato per me, ma ho trovato un'ottima soluzione. L'errore più grande che le persone stanno facendo è avere tutte e 3 le proprietà CSS dichiarate sull'elemento al momento del caricamento. Devi aggiungere quegli stili + tooltip in modo dinamico SE e SOLO SE l'intervallo su cui vuoi che sia un'ellissi è più largo del suo genitore.

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

È possibile circondare la campata con un'altra campata, quindi verificare semplicemente se la larghezza della campata originale / interna è maggiore di quella della campata nuovo / esterno. Nota che dico forse - è approssimativamente basato sulla mia situazione in cui avevo un spaninterno di un tdquindi non so davvero che se funzionerà con un spaninterno di un span.

Ecco però il mio codice per gli altri che potrebbero trovarsi in una posizione simile alla mia; Lo sto copiando / incollando senza modifiche anche se si trova in un contesto angolare, non penso che toglie la leggibilità e il concetto essenziale. L'ho codificato come metodo di servizio perché dovevo applicarlo in più di un posto. Il selettore che ho passato è stato un selettore di classe che corrisponderà a più istanze.

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