CSS Before and After Pseudo-Elements (Part 2): Making Tooltips
We’ll continue from where we stopped last time on pseudo-elements ::before and ::after. We’ll be seeing how to apply them in making tooltips. I’ll advice that you go through the previous article if you haven’t, it will help you better understand what we’re dealing with.
WHAT IS A TOOLTIP?
Tooltips help provide extra information and clarify the doubt of users as they use some functions in your websites. They’re necessary to offer explanations about particular features and help users use those features even as they navigate your website.
OK that understood, let’s get our hands dirty and make mama some tooltips.
We’ll be making a tooltip that tells users the meaning of CPU once they hover on the word (or abbreviation) CPU.
For our HTML we’ll have,
Here we’re trying to attach a tooltip to the text CPU enclosed within the span tag. Within the tag we’ll have to create a user-defined attribute that is going to hold the text we’ll be displaying in our tooltip which in this case will be: Central Processing Unit.
We might want to style our “CPU” text so that it stands out from the other texts and show our users that there’s something attached to it. To do this, we’ll be adding codes from the snippet below to our CSS file.
What we have above is a selection method that picks out the span tag with the attribute simple-tooltip and applies these styles to its content. After adding the styles, we have this as our output:
That sorted out, we’ll want to start visualizing our tooltip, and to do this I’ll be using the ::after pseudo-element (you can use the ::before pseudo-element too). Codes below:
The property content will take in the attribute attached to the word CPU we’re adding the tooltip to.
The transform:scale() scales the tooltip to 0 so that it’s not displayed initially. This can also be done with display:none, but for the sake of some sweet animations, we’ll be using the first one. Our result will look like below:
Great! We have this displaying already so we’re on track, but wait! It’s a tooltip, we don’t want it displaying always, only when the users hover on the CPU text. It is for this reason we initially scaled the tooltip to 0. To display the tooltip on mouse hover, we can use the :hover pseudo class. Here’s what the code will look like:
Remember the sweet animation I told you of? The transition property will make that obvious.
And there you go; your tooltip set and ready to go.
Originally published on ICODEMAG
