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. 

Divi Tooltip Create Help Cursor Custom
To do that we simply add it the Tooltip CSS like this:

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.

We are done stylizing the Tooltip box. The image below shows you what we have created thus far. Don’t just use my settings, play with each one of the variables with your own settings to find something you like, that works for you. This is one of the reasons I strongly encourage using a webhosting company that allows you to create staging sites. I use Cloudways because it’s been the best hosting company I’ve used so far. I wrote about the many reasons I use Cloudways, so feel free to give it a read and see if Cloudways is right for you. Or just follow the link to start your 3-day free trial and discover the wonders of the cloud-based webhost for yourself.

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.

The image below shows what we’ve created so far.
Customizing Divi Tooltip

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:

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.

Better Social Media

Instagram Training




Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Big Discounts for Domains, Hosting, SSL and more

Legal Disclaimer

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.  Thank you for your support.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

For Your Inner Nerd

Rolecosplay Movie Costumes

More From Divi Dude

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

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…

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

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 …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

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

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This