supprimer titre image thumb

Delete the title that appears when hovering over an image in Divi (with or without plugin)

Published on 14/06/2022 | 2 comments

824 words

3

You may have noticed that a tooltip appears on mouseover in your Divi publications?

If you, or your client, find this annoying, you can solve this problem in less time than it takes me to write this mini-tutorial!

I will show you 2 methods: with or without extension.

image hover title

Note for a better understanding: the tooltip appears when the Internet user hovers his mouse over an image on your site. This means that it is a modification in Javascript. Indeed, JS is the language used to carry out interactions between the site and the Internet user. Therefore, this tooltip cannot be hidden/deleted with CSS (which is a much easier language to learn and master). This code could be modified in a child theme, but it would be much more complicated... Let's continue...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Delete the image title on mouse over with plugin

There are various ways to add code to DiviLet's start by looking at the method that uses the Code Snippets.

Installer l'extension Code Snippets
  1. Go to the Extensions > Add tab, enter Code Snippets in the search bar.
  2. Install and activate the extension.
Cloner un snippet de Javascript
  1. Go to the Snippets tab > All snippets.
  2. Locate the sample Javascript snippet, then click Clone*.
  3. You will find this clone at the bottom of the list of extracts. Click on Modify.
image hover title code snippet 3
  1. Give your snippet a title to make it easier to find in the list of snippets.
  2. Instead of "write your JavaScript code here", copy and paste the following code:
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. Choose (or keep) the option "Run only in the public interface".
image hover title code snippet 4
  1. Below the snippet, a field allows you to enter a description. This will allow you, later on, to remember what this piece of code is used for.
  2. Save your changes.
  3. Back in the list of snippets, check that the toggle is positioned to the right and is blue. This makes your code active (if the toggle is greyed out, your code is inactive).
image hover title not display

Now go and have a look at your site... The tooltips on mouse-over should have disappeared!

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

*Important: if you don't have a blank JS code example that you can CLONE, just add a new snippet and paste the code below (it's the same code as the previous one, but it contains the add_action function):

add_action( 'wp_head', function () { ?>

2 - Delete the title of the image on mouse-over without a plugin

This is the fastest method. No need to install a new extension, Divi allows us to do this from its options.

image hover title sans plugin
Add a snippet to the Head section of the site
  1. Go to the Divi > Theme Options > Integration
  2. Dans l’encart <em>« Ajouter ligne de code à la <head> de votre blog »</em>, copiez et collez le code qui suit.
  3. Save your changes.

Here is the code to use:

The original code is from the LearnHowWP.

Now you can check the images on your site: the title tooltip no longer appears on mouseover.

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 - What is the best method?

Both methods are valid!

Some users don't like adding plugins over and over again, so they will opt for the Divi options method.

However, the method with Code Snippets offers some advantages:

  • If the code is faulty for X reasons (you copied and pasted incorrectly, the source where you found your snippet is obsolete, etc), you can easily disable the snippet thanks to its blue Toggle.
  • If the added code breaks your site, it's much easier to temporarily disable a plugin via FTP rather than the Divi theme.
  • If you're just starting out, this is a good way to check if it works before you permanently embed your snippet in Divi's options.
  • This allows you to organize your snippets: if you have a lot of them, it can be difficult to identify them if they are all in a row in the theme options (Integration tab).

To go further, here are some articles that might interest you:

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme effectively with my Divi training !

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
bouton support divi
bouton calendrier avent divi small

You might like it too:

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.

24 gifts to download!

Every day, from December 1st to 24th, come and open your box and leave with your digital bonus to download!

Pin It on Pinterest

Shares
Share This