WP Rocket - WordPress Caching Plugin
Rolecosplay

~Just the Facts~

DIVI SHORTCODE – ADDING & CUSTOMIZING THE TOOLTIP

written 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 (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 technques 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 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 make it 200 px 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 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 an nothing happens.Notice nothing happened when you hovered over the sentence, but this 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 Add a Tooltip Text 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 instrucitons 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:

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.

Instagram Training




Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Build Better Websites

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Big Discounts for Domains, Hosting, SSL and more

Subscribe

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

For Your Inner Nerd

Rolecosplay Movie Costumes

Latest Divi Dude Tutorials

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission. As an Amazon Associate I earn from qualifying purchases. Thank you for your support.

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