Add a Tooltip Popup for Divi & WordPress

Feb 19, 2021 | Divi Theme, WordPress Wednesday

Need to add a Tooltip bubble to your #WordPress website? Add one with the Divi theme or using any WordPress theme. All for free with this simple shortcode or plugin.

Free plugins to make it work https://wordpress.org/plugins/tags/tooltip/

The shortcode for use inside of the Divi Theme –
Icon or Word for linking hereadd you popup words here

Plugin for adding Icons to your website https://wordpress.org/plugins/font-awesome/

– Hey y’all, my name is Kori Ashton and welcome to another WordPress Wednesday. I’m gonna give you a really simple, helpful video to show you how to create a tool tip inside of the Divi theme. Did you know there’s a preexisting short code for you? So, my example site is of course, askkori.com. I’m gonna go ahead enable the Visual Builder for us. Open that up, super simple to do it. Doesn’t really take heavy duty code. It’s just one little line of a short code. So, we’re just gonna go down and find the area that we want to have linkable or be the actual trigger for the tool tip. So, right here on the word, WordPress, I’m gonna have that be able to be hovered over and pop up a tool tip. So, I’m gonna open up this text area, go in here. Let me make this a little bit wider so you can see things a little bit easier. I’ll zoom in a little bit for you. The word, WordPress is sitting right here. I’m gonna go ahead and open up an open bracket, type in the word, tool tip, and if you’d like, I’ll put this code in the description box below so you can just copy and paste it in. Then, the word text equals open quotes, and I’m gonna type in what you want inside the tool tip bubble that appears whenever they hover over. So I’m gonna say, The Best CMS in the World, woo hoo. In quotes, in brackets. But now in order to really make it obvious that the word, WordPress is the tool tip, you’re gonna need to close the bracket here and do in tool tip. Close that tool tip short code, perfect. And then again, people still aren’t gonna know, there’s no text decoration there. They’re not gonna know that word is actually clickable so we want to make it stand out a little bit. I’m just gonna wrap a strong tag around it so that it looks a little bold.

There you go and go ahead and click the check mark and I’m gonna go ahead and click save. You see it thinking right here. It’s trying to render that for us. I’m gonna go ahead and exit out of the Visual Builder and you’ll be able to see it functioning perfectly. Let’s scroll down a little bit. You see the word, WordPress is a little bit bold, good. You hover over it and The Best CMS in the World, just like that. Okay, so what if you wanted it to function like that over an icon? Let me show you an easy way to do that. We’re gonna go ahead and go back into your editor and open back up that same spot down here. So instead of the word, WordPress being what is now clickable, I’m gonna back out the bold command that we put in there, we put a little inline code in there, back all that out. Instead of the word, WordPress, I’m gonna move that word, WordPress to the front side so the sentence still reads correctly. And, then I’m gonna add in in the middle of my little tool tip, we’re gonna put in an icons. So, I’m gonna go back to Visual mode for a minute and right inside of here, I’m gonna put my cursor, do you see that little spot right there? Put my cursor right between that and you can go right over here to the left side here and you’ll find two different areas of special characters and icons. I’m gonna use just a fun, little happy smiling face here. Let’s just do that, one with cool glasses on. All right, that’s our little icon, I’m gonna click check mark. You can put any icon you want there, especially if you have a font awesome library inside of there, you can add in any icon. This is the plugin that I would recommend doing that with. So, it’s a free plugin that you can add to your website and you’ll get a bunch of icons that you can put inside of your WordPress website. For now, I’m gonna go in and click save, exit, let’s scroll down to the bottom and see the little smiley guy and hover over it. The Best CMS in the World, there it is. I might just leave him there. I kind of liked that. And, for those of you who are not running on Divi and you want to lean on plugin, this is a great one that I recommend. I’ll put the link to it in the description box below. There were a few over here on the WordPress repository that you’re able to get in and review and see what might be best for your specific website. What you’re going to be looking for though, specifically is the word, tool tip. So, you can come over here and do a search for any tool tip plugins.

Hey, so since you’re running on the Divi theme, be sure to check out my entire playlist here to show you other tips and tricks that are incredible for using this page builder or this theme for your WordPress website. If you have any other questions, be sure to reach out to me. You can tweet me. You can add comments in the thread below or you can always jump over to Divi as well, since you purchased a premium license, you have support directly from the creators of Divi. So be sure to check that out. I’ll put the link in the description below. All right y’all, I will see you next week. Hope you have a great one, bye everyone.