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.
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.
- Go to the Extensions > Add tab, enter Code Snippets in the search bar.
- Install and activate the extension.
- Go to the Snippets tab > All snippets.
- Locate the sample Javascript snippet, then click Clone*.
- You will find this clone at the bottom of the list of extracts. Click on Modify.
- Give your snippet a title to make it easier to find in the list of snippets.
- 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");
});
});- Choose (or keep) the option "Run only in the public interface".
- 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.
- Save your changes.
- 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).
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.
- Go to the Divi > Theme Options > Integration
- Dans l’encart <em>« Ajouter ligne de code à la <head> de votre blog »</em>, copiez et collez le code qui suit.
- 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:
- Useful snippets for Divi
- How to turn your cursor into a button when you hover over an item using Divi
- How to change the mouse cursor with a custom image
- How to add a stylish, inverted slider to your Divi page
- How do I edit a hover image with Divi?
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 !
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.
Ah, je vais regarder… comment tu vas depuis le temps ?
Merci pour cette astuce rapide !!
Cool !