DIVI SHORTCODE – ADDING & CUSTOMIZING THE TOOLTIP
By Divi Dude
Here’s a tip: Use the shortcode Tooltip. See what I did there? I don’t use a lot of the shortcodes that come with Divi, or the ones that come in the Elegant Themes shortcode plugin package for that matter. But one of the ones I do use is Tooltip (along with Dropcap).
It’s pretty basic, it just adds some additional information when you hover over a word or phrase.
Try it herePretty cool, eh?.
I did a video describing how to do it, because I like doing videos. Watch the really short video, and then scroll down to find out how to customize the Divi Tooltip. And towards the bottom of the page is the YouTube tutorial, if you’d rather watch than read (plus it explains it much more).
Customizing Divi Tooltip
Now, that you know how to apply Divi’s Tooltip, let me show you some simple techniques you can use to customize it.
In the section, I will show you how to:
- Add a help cursor
- Change the colors and size
- Change the arrow
- Add an icon to Tooltip
Change the Cursor to Help Cursor
When you use the Tooltip Shortcode out of the box, you’ll notice the cursor does not change. I want my readers to know that there is a helpful tip there, so I’m going to change the cursor to the help symbol.
Change the Styles of Background and Font
If your website is on a white background, then the current Tooltip CSS might not aesthetically work for you, because it is black text on a white background. Let’s change it to something a little better. Underneath the .et-tooltip we used above, we will enter this code to start:
I always find it helpful to grab the existing CSS, so I know what I have to change, hide and add. The CSS for the Tooltip Shortcode looks like this:
Now that we know what we’re working with, we’re going to customize many of the settings. We will change font color, font size, background color, border-radius, box-shadow (aka drop-shadow), and left margin.
Since we are making no changes to display or position, we will ignore these. Remember, when adding custom CSS to a child theme or to the custom CSS panels in Divi, the additions you make to CSS will add to the class, or rewrite a rule if it’s part of the class included in Divi. If you do not make any changes to a variable, you needn’t reenter it as it will be untouched, thus remaining the same. That’s a lot of words to say: if you ain’t changing it, don’t worry about it.
Now let’s make our background green, while making our font white and giving it a custom size. So here’s what we’re going to enter:
I want to change the line-height, so that it is 1.8 times whatever font-size I use. And then I want to change the color of the border. We could remove it, but I prefer to leave it so that it doesn’t mess with my arrow later on. You can experiment with having a border or not (to remove, you’d add the CSS border: none;). You’ll want it to be the same color as your background. In my example, it’s a green with a hex value of: #32952d. And finally, I want to change the border-radius (the rounder corners of the box) so they are a little less rounded. So here’s the code we will use (notice we are adding to what we already did):
MAKE YOUR DIVI LIFE EASIER
Divi Booster is a Divi plugin that just makes your life as a website developer easier. It adds about 50 functions to the already impressive Divi WordPress theme. Want an example? Here’s a video I did showing the long way and the short way to add additional social media pages to your Divi theme (guess which plugin I used to show the short way). But it doesn’t just help with social media, it also allows you to make adjustments to sliders, headers, posts, pages, modules … like I wrote above, it does about 50 things (I write “about” because it is continuously updated with more functions). $29.
I don’t like the way the Tooltip starts at the left of the area in which it is displaying a tip for. So I want to move the margin so it lines up on the left. To do this, we will change the left margin. I also want to add a much more distinguished box-shadow to the Tooltip box. For information on adding drop-shadows, see the tutorial I created on YouTube. And lastly, I want to make the padding more uniform, so I’m going to make it the same. Again, we will add on to the code we already have.
Now let’s set where the bottom ends up. We’re going to use the calculation command in CSS. What we can do with this is cause the Tooltip to have a little movement to it. I use 25px in my CSS code, but play with that number by making it 200px to see what it does.
Changing the Tooltip Down-Arrow
So if you follow along above, you will notice the down-arrow does not match and it’s in the wrong location. We can fix that by changing the CSS Code for the down-arrow. Let’s get started by adding the following CSS Code just below the .et-tooltip-box code we just customized:
Here’s the code that comes standard with Divi that we need to change:
If you want to get rid of the down-arrow all together, then you need to add this code.
If you like the down-arrow, you need to match it to the background color we just created. We don’t worry about the display and position, so we’ll ignore those. We’ll change the other attributes and get rid of the background graphic that currently is the down-arrow.
Here we are going to re-add the down-arrow now, but instead of using a graphic like what was used previously, we will do it with borders. We want to use the same green color as previously used for the background: #32952d. And we don’t want the borders showing up on the sides, so instead of giving those a color, we make them transparent. Notice how we now have a down-arrow by just using a little CSS.
Adding An Icon After The Tooltip Tip
There are two ways to go about this. One, is to include the icon with the text, so if you hover over it the sentence or the icon it will reveal the tip. Here is an example of this method:Hover your cursor over me here.See how the Tip Box showed up no matter where you placed your cursor.
The second method is to just have the icon reveal the tip. In this case, the tip box will only show up if someone hovers over the icon only. Here is an example of this method:
Hover over me and nothing happens.Notice nothing happened when you hovered over the sentence, but this Tip Box popped up over the icon
We need to add the icon to the Tooltip CSS. Since we want to appear after the tip (in the first example above), we must tell our CSS to put it after the tip. We do that by using :after. And since we want it to appear after the Tooltip, we customize that part of the CSS code, so we’ll add it to the .et-tooltip like this:
Scroll down towards the bottom of the page and you will find the question mark symbol has a hex value of: 
When using the hex values (or unicode), you will ignore all the symbols, and just use the letter and number for the CSS (if you are using icons from a different font family, then be sure to follow their instructions on how to enter them in your CSS.) So in our case, we use: e064.
Be sure to customize the icon to fit your needs. On my site I use a grey color, add a little bit of padding to ensure that it doesn’t abut the previous word, and make it a little bit smaller than the text. It’s also important to make sure you tell Divi which font the icon is from. So here’s the code I end up with:
This will automatically put the icon after the tip. If you want it as part of the sentence, then you simply have to do this:
And if you just want to have the icon appear after the sentence, then you enter it this way:
Customize Divi Tooltip Wrap-Up
Everything above is how I customize the Tooltip for all my sites. Every site has different colors and sizes and such. As should yours. But by knowing the proper CSS Classes for the Tooltip, and a bit of CSS know-how, you can stylize your Divi Tooltip so it fits your site. If all the CSS on this page confuses you, then I do recommend you find a good CSS book that you can keep handy. Our friends at Amazon sell a bunch of CSS books. I’m sure you can find one that will help.
Here is the code I ended up using on this site at the time I wrote this article. It may have changed some by the time you are reading it: It has changed a bit since writing this:
How to Customize Divi’s Tooltip Video
If all this reading was a bit much for you, I have created a video that shows you how to customize the Divi Tooltip visually.
More From Divi Dude
Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…
This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …
Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).