Comment afficher les info-bulles uniquement lorsque le texte est tronqué avec des points de suspension ?

Affichage des info-bulles pour le texte tronqué avec points de suspension

Lorsque vous traitez des éléments de page dynamiques qui peuvent déborder de leur zone d'affichage désignée, ajouter des info-bulles pour fournir du contexte devient indispensable. Dans de tels cas, il est souhaitable d'afficher les info-bulles uniquement lorsque les points de suspension (...) apparaissent pour indiquer un contenu tronqué.

Considérez le balisage HTML suivant :

<code class="html"><span id="myId" class="my-class">...</span></code>

Avec un style CSS qui permet points de suspension pour un contenu large :

<code class="css">.my-class {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}</code>

Pour ajouter une info-bulle à cet élément, nous pouvons exploiter l'événement mouseenter de jQuery pour vérifier si la largeur de l'élément est inférieure à sa largeur de défilement, indiquant un contenu tronqué. Ce n'est qu'alors que nous définissons l'attribut title, garantissant que l'info-bulle apparaît lorsque les points de suspension sont déclenchés :

<code class="javascript">$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

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

En implémentant cette solution, les info-bulles ne seront affichées que lorsque le contenu déborde et que les points de suspension s'activent, fournissant un contexte précieux pour l'utilisateur sans encombrer l'interface lorsque cela n'est pas nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!