Sur certains sites, les images affichent une info-bulle au survol de la souris. Ce comportement provient généralement de l’attribut title de l’image.
Contenu avancé #
Cet article utilise du JavaScript avec jQuery. Une mauvaise manipulation peut impacter le comportement des images sur le site.
Objectif #
Masquer l’information affichée au survol des images lorsque la souris passe dessus.
Principe #
La méthode consiste à retirer temporairement l’attribut title au survol, puis à le remettre lorsque la souris quitte l’image.
Code à utiliser #
Ajoute le code suivant dans la zone prévue pour les scripts du site :
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $lwp_title = $(this).attr("title");
$(this).attr("lwp_title", $lwp_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $lwp_title = $(this).attr("lwp_title");
$(this).attr("title", $lwp_title);
$(this).removeAttr("lwp_title");
});
});
Où ajouter ce code #
- Dans Divi → Options du thème → Intégration
- Dans la zone prévue pour les scripts du header ou du footer
- Via un snippet dédié si tu préfères centraliser le code
Important #
Si tu ajoutes ce code manuellement dans une zone HTML ou d’intégration, n’oublie pas les balises <script> et </script>.
Quand utiliser cette méthode #
- Si les info-bulles au survol gênent la lecture ou le design
- Si certaines images affichent un texte inutile au passage de la souris
- Si tu veux un rendu plus propre sur desktop
Points d’attention #
- Ce script agit sur toutes les images ciblées par
$("img") - Si tu veux limiter l’effet à une zone précise, il faut cibler un sélecteur plus spécifique
- Cette méthode dépend de jQuery
Astuce utile #
Avant d’appliquer ce script globalement, teste-le sur une page précise pour vérifier qu’il ne masque pas une information utile.
Compatibilité #
Cette méthode reste utile sur des sites Divi classiques, mais elle dépend de la présence de jQuery et de la manière dont les images sont générées. Sur un site très personnalisé, un ajustement du sélecteur peut être nécessaire.
Pour conclure #
Ce script permet de supprimer proprement les info-bulles d’images au survol. C’est une solution simple lorsque l’attribut title perturbe l’expérience utilisateur.