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

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:

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:

On this page you will notice that I use the I'm all by my lonesome symbol.  I get this from the icons that come standard in Divi.  You can find those by following this link.

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.  

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.