supprimer titre image thumb

Supprimer le titre qui s’affiche au survol d’une image dans Divi (avec ou sans plugin)

Publié le 14/06/2022 | 2 commentaires

824 mots

3

Vous avez peut-être remarqué qu’une infobulle apparait au survol de l’image avec la souris, dans vos publications Divi ?

Si vous, ou votre client, trouve cela ennuyeux, vous allez pouvoir régler ce problème en moins de temps qu’il ne m’en faut pour écrire ce mini-tutoriel !

Je vais vous montrer 2 méthodes : avec ou sans extension.

image hover title

Note pour mieux comprendre : l’infobulle apparaît lorsque l’internaute passe sa souris au-dessus d’une image de votre site. Cela signifie qu’il s’agit d’une modification en Javascript. En effet, le JS est le langage utilisé pour réaliser des interactions entre le site et l’internaute. De ce fait, cette infobulle ne peut pas être cachée/supprimée avec du CSS (qui est un langage bien plus facile à apprendre et à maitriser). Ce code pourrait être modifié au niveau d’un thème enfant, mais ce serait bien plus compliqué… Continuons…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Supprimer le titre de l’image au survol de la souris avec plugin

Il existe diverses manières pour ajouter du code dans Divi, commençons par voir la méthode qui utilise l’extension Code Snippets.

Installer l'extension Code Snippets
  1. Allez à l’onglet Extensions > Ajouter, saisissez Code Snippets dans la barre de recherche.
  2. Installez puis activez l’extension.
Cloner un snippet de Javascript
  1. Rendez-vous à l’onglet Snippets > Tous les extraits.
  2. Repérez l’exemple d’extrait Javascript, puis cliquez sur Cloner*.
  3. Vous retrouverez ce clone en bas de la liste des extraits. Cliquez sur Modifier.
image hover title code snippet 3
  1. Donnez un titre à votre snippet afin de le repérer plus facilement dans la liste des snippets.
  2. À la place de « écrivez votre code JavaScript ici », copiez et collez le code suivant :
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");
    });
});
  1. Optez (ou conservez) l’option « Exécutez uniquement dans l’interface publique ».
image hover title code snippet 4
  1. En dessous du snippet, un champ vous permet de saisir une desciption. Cela vous permettra, plus tard, de vous rappeler à quoi sert ce bout de code.
  2. Enregistrez vos modifications.
  3. De retour dans la liste des snippets, vérifiez que le Toggle est positionné à droite et est bleu. Cela rend votre code actif (si le Toggle est grisé, votre code est inactif).
image hover title not display

Allez maintenant faire un petit tour sur votre site… Les infobulles au survol de la souris devraient avoir disparu !

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

*Important : si vous ne possédez pas d’exemple de code JS vierge que vous pouvez CLONER, ajoutez simplement un nouveau snippet et collez le code ci-dessous (c’est le même code que le précédent, mais il contient la fonction add_action) :

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 } );

2 – Supprimer le titre de l’image au survol de la souris sans plugin

C’est la méthode la plus rapide. Pas besoin d’installer une nouvelle extension, Divi nous permet de faire cela depuis ses options.

image hover title sans plugin
Ajouter un snippet à la section Head du site
  1. Allez à l’onglet Divi > Options du thème > Intégration
  2. Dans l’encart « Ajouter ligne de code à la <head> de votre blog », copiez et collez le code qui suit.
  3. Sauvegardez vos modifications.

Voici le code à utiliser :

<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>

Le code original provient du site LearnHowWP.

Voilà, maintenant, vous pouvez vérifier les images de votre site : l’infobulle du titre n’apparaît plus au survol de la souris.

Notez : il s’agit du même code utilisé pour la méthode Code Snippet, mis à part que celui-ci embarque les balises <script>

3 – Quelle est la meilleure méthode ?

Les deux méthodes sont valables !

Certains utilisateurs n’aiment pas ajouter encore et toujours des plugins, ils opteront donc pour la méthode avec les options de Divi.

Toutefois, la méthode avec Code Snippets offre quelques avantages :

  • Si le code est défectueux pour X raisons (vous avez mal copié-collé, la source où vous avez trouvé votre snippet est obsolète, etc), vous pouvez facilement désactiver le snippet grâce à son Toggle bleu.
  • Si le code ajouté casse votre site, c’est beaucoup plus facile de désactiver temporairement un plugin via FTP plutôt que le thème Divi.
  • Si vous débutez, c’est un bon moyen de vérifier si cela fonctionne avant d’embarquer votre snippet définitivement dans les options de Divi.
  • Cela permet de bien ranger vos snippets : si vous en avez beaucoup, cela peut être difficile de les identifier s’ils sont tous à la suite dans les options du thème (onglet Intégration).

Pour aller plus loin, voici quelques articles qui pourraient vous intéresser :

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos ! Ou apprenez à vous servir efficacement de ce thème grâce à ma formation Divi !

supprimer titre image pin 2
supprimer titre image pin 1
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton

Ça devrait vous plaire aussi :

2 Commentaires

  1. David C.

    Salut Lydia,

    Ça faisait longtemps.

    Je crois qu’il y a une propriété CSS pour ça, à mes souvenir.
    Ou au moins jouer sur le cursor ou pointer-event…

    Au plaisir de te lire.

  2. Lycia Diaz

    Ah, je vais regarder… comment tu vas depuis le temps ?

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Nouvelle formation Divi !

55 vidéos pour maitriser le Divi Visual Builder comme un pro : ⏱ 3h30 de théorie + 👩🏻‍💻 6h00 de mise en pratique + 🤝 30min. d’accompagnement individuel en visio.

(formation éligible CPF)

Pin It on Pinterest

Shares
Share This