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

Affichage des info-bulles uniquement lorsque des points de suspension sont appliqués

Les développeurs Web rencontrent souvent des situations dans lesquelles le contenu dynamique doit être contenu dans une largeur fixe, ce qui conduit à l'utilisation de styles de points de suspension pour tronquer le débordement. Dans de tels scénarios, fournir des informations supplémentaires via des info-bulles peut améliorer l'expérience utilisateur, mais il est souhaitable d'afficher l'info-bulle uniquement lorsque les points de suspension sont visibles.

Pour y parvenir, une approche consiste à utiliser JavaScript pour détecter la présence de points de suspension. et ajoutez dynamiquement le contenu de l'info-bulle uniquement lorsqu'il est applicable. En utilisant la fonctionnalité de points de suspension intégrée et jQuery, le code suivant accomplit cette tâche :

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

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

Ce code utilise l'événement mouseenter pour lier un gestionnaire de survol aux éléments avec la classe couldOverflow. Dans le gestionnaire, il vérifie si la largeur de l'élément est inférieure à sa largeur de défilement, indiquant la présence de points de suspension. Si tel est le cas et que l'élément n'a pas encore d'attribut de titre, le contenu de l'info-bulle est ajouté dynamiquement en utilisant le texte de l'élément comme contenu de l'info-bulle.

Cette technique garantit que l'info-bulle apparaît uniquement lorsque les points de suspension sont visibles, fournissant une amélioration discrète et informative de l'interface utilisateur.

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!