(upbeat instrumental music)
- 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.
(soft bell music)