HTML - comment puis-je afficher les info-bulle UNIQUEMENT lorsque le bouton de sélection est activé

Voici une manière qu'il l'aide de l'ellipse de réglage, et ajoute la title attribut sur demande (avec jQuery) sur Martin Smith commentaire:

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

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

uosɐſ la réponse est fondamentalement correcte, mais vous ne voulez probablement pas à le faire dans le mouseenter événement. Qui va causer à faire le calcul pour déterminer s'il est nécessaire, chaque fois que vous passez la souris sur l'élément. À moins que la taille de l'élément est en train de changer, il n'y a pas de raison de le faire.

Il serait préférable de simplement appeler ce code immédiatement après l'élément est ajouté au DOM:

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

Ou, si vous ne savez pas quand exactement il est ajouté, puis d'appeler ce code une fois que la page a fini de se charger.

si vous avez plus d'un seul élément que vous avez besoin de le faire avec, alors vous pouvez donner tous la même classe (comme "mightOverflow"), et utiliser ce code pour mettre à jour tous les:

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

Nous avons besoin pour détecter si l'ellipse est vraiment appliqué, puis pour afficher une info-bulle pour révéler le texte intégral. Il ne suffit pas seulement de comparer les "this.offsetWidth < this.scrollWidth" lorsque l'élément de près de la tenue de son contenu, mais seulement manque un ou deux pixels en largeur, en particulier pour le texte de la pleine largeur de Chinois/Japonais/coréen caractères.

Voici un exemple: http://jsfiddle.net/28r5D/5/

J'ai trouvé un moyen d'améliorer les points de suspension de détection:

1. Comparer "this.offsetWidth < this.scrollWidth" tout d'abord, continuer à l'étape #2 en cas d'échec.
2. Commutateur de style css temporellement à {'débordement': 'visible', 'espace': 'normale', 'word-break": "break-all'}.
3. Laissez navigateur ne nouvelle disposition. Si word-wrap passe, l'élément élargit sa hauteur ce qui signifie également des points de suspension est nécessaire.
4. Restauration de style css.

Voici mon amélioration: http://jsfiddle.net/28r5D/6/

Voici deux autres pur CSS solutions:

1. Afficher le texte tronqué en place:

CSS:

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

HTML:

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

1. Montrer l'arbitraire d'un "tooltip":

CSS:

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

HTML:

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

Si vous souhaitez faire uniquement à l'aide de javascript, je voudrais faire le suivant. Donner la durée d'un attribut id (de sorte qu'il peut facilement être récupéré à partir de la DOM) et de les placer tout le contenu dans un attribut nommé "contenu":

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

Puis, dans votre javascript, vous pouvez effectuer les opérations suivantes après l'élément a été inséré dans le 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); 
}

Bien sûr, si vous êtes à l'aide de javascript à insérer la plage dans les DOM, vous pouvez simplement conserver le contenu dans une variable avant de l'insérer. De cette façon, vous n'avez pas besoin d'un contenu de l'attribut sur la durée.

Il y a plus de solutions élégantes que cela, si vous souhaitez utiliser jQuery.

Aucune des solutions ci-dessus a fonctionné pour moi, mais j'ai trouvé une excellente solution. La plus grande erreur que les gens font est d'avoir tous les 3 propriétés CSS déclaré sur l'élément sur pageload. Vous devez ajouter ces styles+info-bulle dynamiquement SI et SEULEMENT SI la durée que vous voulez d'une ellipse est plus large que son parent.

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

Voici la Vanille, JavaScript solution:

JS:

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

})();

CSS:

.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px;
  border-style: solid;
  width: 120px; 
}

HTML:

<div class="cell">hello world!</div>
<div class="cell">hello mars! kind regards, world</div>