HTML - comment afficher l'infobulle UNIQUEMENT lorsque les points de suspension sont activés

J'ai une étendue avec des données dynamiques dans ma page, avec ellipsisstyle.

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

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

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

Je voudrais ajouter à cette info-bulle d'élément avec le même contenu, mais je veux qu'elle n'apparaisse que lorsque le contenu est long et que les points de suspension apparaissent à l'écran.

Y a-t-il un moyen de le faire?
Le navigateur lance-t-il un événement lorsqu'il ellipsisest activé?

* Navigateur: Internet Explorer

Voici une façon de le faire en utilisant le paramètre des points de suspension intégrés et en ajoutant l' titleattribut à la demande (avec jQuery) en s'appuyant sur le commentaire de Martin Smith:

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

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

Voici une solution CSS pure. Pas besoin de jQuery. Il n'affichera pas d'infobulle, mais étendra simplement le contenu sur toute sa longueur au survol de la souris.

Fonctionne très bien si vous avez du contenu qui est remplacé. Ensuite, vous n'avez pas besoin d'exécuter une fonction jQuery à chaque fois.

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

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

La réponse de uosɐſ est fondamentalement correcte, mais vous ne voulez probablement pas le faire dans l'événement mouseenter. Cela va le faire 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 ne change, il n'y a aucune raison de le faire.

Il serait préférable d'appeler ce code immédiatement après l'ajout de l'élément 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 exactement quand il est ajouté, appelez ce code une fois le chargement de la page terminé.

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

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

Voici deux autres solutions CSS pures:

1. Afficher le texte tronqué en place:

.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. Afficher une "info-bulle" arbitraire :

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

Voici mon 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);

Usage:

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

Éditer:

J'ai fait un aperçu de ce plugin. https://gist.github.com/UziTech/d45102cdffb1039d4415

Nous devons détecter si les points de suspension sont réellement appliqués, puis afficher une info-bulle pour révéler le texte intégral. Il ne suffit pas de comparer " this.offsetWidth < this.scrollWidth" lorsque l'élément contient presque son contenu, mais il ne manque qu'un ou deux pixels de plus en largeur, en particulier pour le texte de caractères chinois / japonais / coréens pleine largeur.

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

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

1. Comparez d'abord " this.offsetWidth < this.scrollWidth", continuez l'étape 2 en cas d'échec.
2. Basculez temporairement le style CSS en {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}.
3. Laissez le navigateur relayer. Si le retour à la ligne se produit, l'élément augmente sa hauteur, ce qui signifie également que des points de suspension sont requis.
4. Restaurer le style CSS.

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

J'ai créé un plugin jQuery qui utilise l'info-bulle de Bootstrap au lieu de l'info-bulle intégrée du navigateur. Veuillez noter que cela n'a pas été testé avec un navigateur plus ancien.

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

C'est ce que j'ai fait. La plupart des scripts d'infobulles nécessitent que vous exécutiez une fonction qui stocke les info-bulles. Ceci est un exemple 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();
});

Si vous ne vouliez pas vérifier les ellipses css, vous pouvez simplifier comme:

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

J'ai le "quand" autour de lui, de sorte que la fonction "setupTooltip" ne s'exécute pas tant que tous les titres n'ont pas été mis à jour. Remplacez le "setupTooltip", par votre fonction d'info-bulle et le * par les éléments que vous souhaitez vérifier. * passera par tous si vous le laissez.

Si vous souhaitez simplement mettre à jour les attributs de titre avec l'info-bulle des navigateurs, vous pouvez simplifier comme:

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

Ou sans vérification des points de suspension:

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

Si vous souhaitez le faire uniquement en utilisant javascript, je ferais ce qui suit. Donnez à l'intervalle un attribut id (afin qu'il puisse être facilement récupéré à partir du DOM) et placez 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>

Ensuite, dans votre javascript, vous pouvez effectuer les opérations suivantes après que 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 utilisez javascript pour insérer la plage dans le 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 attribut de contenu sur la durée.

Il existe des solutions plus élégantes que cela si vous souhaitez utiliser jQuery.

J'ai une classe CSS, qui détermine où placer les points de suspension. Sur cette base, je fais ce qui suit (l'ensemble d'éléments pourrait être différent, j'écris ceux-ci, où les points de suspension sont utilisés, bien sûr, il pourrait s'agir d'un sélecteur de classe distinct):

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

Voici une solution 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>

Ce fut ma solution, fonctionne comme un charme!

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

Aucune des solutions ci-dessus n'a fonctionné pour moi, mais j'ai trouvé une excellente solution. La plus grande erreur que les gens font est d'avoir les 3 propriétés CSS déclarées sur l'élément lors du chargement de page. Vous devez ajouter ces styles + info-bulle dynamiquement SI et UNIQUEMENT SI la plage sur laquelle vous voulez 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'
            });
        }
    });

Vous pouvez éventuellement entourer la travée d'une autre travée, puis simplement tester si la largeur de la travée d'origine / intérieure est supérieure à celle de la nouvelle travée / extérieure. Notez que je dis peut-être - c'est à peu près basé sur ma situation où j'avais un spanintérieur d'un tddonc je ne sais pas vraiment si cela fonctionnera avec un spanintérieur d'un span.

Voici cependant mon code pour les autres qui peuvent se retrouver dans une position similaire à la mienne; Je le copie / colle sans modification même si c'est dans un contexte angulaire, je ne pense pas que cela nuit à la lisibilité et au concept essentiel. Je l'ai codé comme méthode de service parce que je devais l'appliquer à plus d'un endroit. Le sélecteur que j'ai transmis est un sélecteur de classe qui correspondra à plusieurs instances.

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