Comment activer dynamiquement les info-bulles pour les effets Ellipsis en HTML ?

Activation dynamique des info-bulles pour les effets d'ellipse en HTML

Énoncé du problème

En HTML, une pratique courante consiste à afficher un texte long dans un espace contraint en utilisant style points de suspension. Cette technique supprime le contenu excédentaire, indiqué par trois points (...). Cependant, il est souvent souhaitable de fournir des informations supplémentaires lorsque les points de suspension sont actifs. Les navigateurs ne déclenchent pas automatiquement d'événements lorsque les points de suspension sont appliqués.

Solution

Pour résoudre ce problème et afficher une info-bulle uniquement lorsque les points de suspension sont activés, voici une solution JavaScript qui exploite jQuery :

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

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

En utilisant ce code, lorsqu'un utilisateur survole un élément DOM avec la classe "mightOverflow", le script vérifie si la largeur affichée de l'élément est inférieure à sa largeur réelle. Si tel est le cas, et si l'élément n'a pas déjà d'attribut de titre défini, il attribue le texte de l'élément à l'attribut de titre, fournissant ainsi une info-bulle en cas de besoin.

Implémentation

Pour implémenter ceci solution dans votre document HTML, ajoutez simplement le bloc de code suivant dans le champ ou section :

<code class="html"><script src="jquery.min.js"></script>
<script>
$('.mightOverflow').bind('mouseenter', function() {
    var $this = $(this);

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

Assurez-vous que la bibliothèque jQuery est chargée (jquery.min.js) avant d'exécuter ce script. Ensuite, appliquez la classe « mightOverflow » aux éléments HTML pour lesquels vous prévoyez des fonctionnalités de points de suspension et d'info-bulles.

Cette solution offre un moyen dynamique et flexible d'ajouter des info-bulles au texte tronqué, améliorant ainsi l'expérience utilisateur et l'accessibilité dans vos applications Web.

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!