Lorsque vous survolez une image sur votre site Divi, une infobulle affichant le titre de l’image peut apparaître, ce qui peut être gênant pour l’expérience utilisateur. Heureusement, il existe des méthodes simples pour supprimer cette infobulle, avec ou sans l’utilisation d’une extension.
Pourquoi ces infobulles apparaissent-elles ?
Les infobulles au survol des images sont générées par l’attribut title
présent dans le code HTML de l’image. Cet attribut est souvent ajouté automatiquement lors de l’insertion d’images dans WordPress. Bien qu’il puisse être utile pour le référencement et l’accessibilité, son affichage au survol peut perturber la navigation.
Méthode 1 : Supprimer l’infobulle avec une extension
L’utilisation d’une extension comme Code Snippets facilite l’ajout de code personnalisé à votre site sans modifier directement les fichiers du thème.
Étapes à suivre :
- Installer et activer l’extension Code Snippets :
- Dans votre tableau de bord WordPress, allez dans « Extensions » > « Ajouter ».
- Recherchez « Code Snippets ».
- Installez et activez l’extension.
- Ajouter un nouveau snippet :
- Accédez à « Snippets » > « Ajouter ».
- Donnez un titre à votre snippet, par exemple « Supprimer infobulle des images ».
- Dans le champ de code, collez le script suivant :
add_action( 'wp_head', function () { ?>
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $ld_title = $(this).attr("title");
$(this).attr("ld_title", $ld_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $ld_title = $(this).attr("ld_title");
$(this).attr("title", $ld_title);
$(this).removeAttr("ld_title");
});
});
</script>
<?php } );
- Sélectionnez l’option « Exécuter uniquement sur le site public ».
- Enregistrez et activez le snippet.
Ce script utilise jQuery pour supprimer temporairement l’attribut title
lors du survol de l’image, empêchant ainsi l’affichage de l’infobulle.
Méthode 2 : Supprimer l’infobulle sans extension
Si vous préférez ne pas utiliser d’extension, vous pouvez ajouter le script directement dans le fichier functions.php
de votre thème enfant.
Étapes à suivre :
- Allez à l’onglet Divi > Options du thème > Intégration
- Dans l’encart « Ajouter ligne de code à la
<head>
de votre blog », copiez et collez le code qui suit. - Sauvegardez vos modifications.
- Dans l’encart « Ajouter ligne de code à la
Le code est le suivant :
<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $ld_title = $(this).attr("title");
$(this).attr("ld_title", $ld_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $ld_title = $(this).attr("ld_title");
$(this).attr("title", $ld_title);
$(this).removeAttr("ld_title");
});
});
</script>
Quelle méthode choisir ?
L’utilisation de l’extension Code Snippets est recommandée pour les utilisateurs qui ne sont pas à l’aise avec la modification des fichiers du thème. Elle offre une interface conviviale pour gérer vos scripts personnalisés en toute sécurité.
Cependant, si vous ne souhaitez pas ajouter de plugin supplémentaire, préférez la seconde méthode !.
En appliquant l’une de ces méthodes, vous améliorerez l’expérience utilisateur sur votre site Divi en supprimant les infobulles indésirables lors du survol des images.