A tooltip is one of those little features which can have a good impact on a website’s overall user experience. Strategically positioned, a series of tooltips can provide helpful insights, hints and guidance to users.
Inserting a tooltip is actually quite easy. Using an element’s “title” attribute, you can attach a tooltip to any element on the web page. For instance, hover your mouse over the phrase below:
Check Me Out!
The code:
<p title="Hello! Am a little tooltip!"> <strong> Check Me Out! </strong> </p>
and, the result:
You see a tooltip which says “Hello! Am a little tooltip!” However, this tooltip is typically boring and ordinary. Creating a colorful tooltip usually involves the use of JavaScript or jQuery.
However, it is possible to create a tooltip using only CSS. In fact, creating a CSS only tooltip is not that difficult. This article will take you through the basic steps involved. It will give you a template which you can use to create CSS tool tips of any design that you want. Let’s get started:
The Goal
Our goal is to create a tooltip which looks like the one below.
We are going to create that tooltip using only CSS. In the process, we shall discover 5 steps that you can use to create your own CSS tool tips. However, before we get to those steps, you need a simple template for setting up the tooltips.
Demo
Here is the complete demo of the tooltip. You can try changing the CSS in the CSS tab:
The Parts
Creating a tooltip is simply a matter of manipulating two sets of elements on the web page. The first is the parent (i.e. the element for tooltip is supposed to appear). The second is the tooltip itself.
The task is quite straightforward. Moving the mouse over the parent should cause the tooltip to appear. Moving it out should cause the tooltip to disappear.
Implementing this using only CSS isn’t that straightforward. However, there is a standard template which makes the implementation a piece of cake. The template basically describes how to position the parent and tooltip elements. It looks like this:
<a href="#"> Parent Element <span > The Tooltip Contents Go Right Here </span> </a>
This is broken down as follows:
<a> This is one holds together both the parent and tooltip elements. In actuality it is the parent. However, in this context, we are reserving the term “parent” for the part which is visible on the web page.
Parent Element – This is the element on which the tooltip should appear upon a mouse being hovered over it. It can be a plain text, a paragraph, an image or any other element.
<span> This is the container for the tooltip. Everything which you want to appear on the tooltip goes between the opening and closing <span> tags. You will basically style the <span> in line with the design of your tooltip.
Following the template, the <a> tag for our example looks like this:
<a href="#"> Check Me Out! <span> <img src="tooltip-icon.png" alt="tooltip" width="48" height="48"> <strong> Piece of Cake </strong> Creating a CSS Tooltip is incredibly easy. You just need to know how to go about it! </span> </a>
We have broken up the template into multiple lines in order to make it more legible. However, it is not difficult to spot out the component parts:
Check Me Out! – this is the parent element. In this case, it is just a plain text
<span> – this is our tooltip. It contains an image, some formatted text, and some plain text as well. To make it easy for you to spot out the different parts, here is a picture of the tooltip with the components marked out.
So, now that we have our template ready, it is time to make bring it all together. To create a tooltip, you basically go through five steps
- Style the parent element
- Implement the tooltip design
- Position the tooltip where you want it to appear
- Make the tooltip vanish
- Use the :hover pseudo class to make the tooltip appear
Now, we are going to look at each of these steps in detail. In the process, we shall create a simple tooltip which can display across different browsers.
1. Style the parent element
The parent element is the element for which you are creating the tool tip. In our case, it is the words “Check Me Out!”. The styling depends on the appearance of the element.
In our case, there isn’t much styling to be done. Just removing the underline which typically appears on links.
For easy styling, let us give the <a> an class attribute of “tooltip_parent”. So, our template now looks like this:
<a href="#" class="tooltip"> Check Me Out! <span>
So, we can now add our styling:
.tooltip_parent{
position: relative;
cursor: help;
}
This isn’t much styling, but it is good enough for our purposes. If you are creating a tooltip for a more sophisticated element (e.g. a button), then you would unleash all your CSS antics to make it look as great as possible. Once you are satisfied with how your element looks, we can proceed to the tooltip.
2. Implement the tooltip design
There are at least two ways of implementing the design for a tooltip. You can use CSS or simply a graphics file. However, before you even think of implementing the design, you need to have a rough idea of what the design actually looks like.
In our case, the design looks like this:
Now, the above design is actually a graphics file. So, we could easily reference it between the <span> files, and be good to go. However, let’s do it with CSS:
As mentioned earlier, all the information which will appear on the tooltip is contained within the <span> tag. Let’s give our <span> and class of “tooltip” so that it now looks like this:
<span class="tooltip"> <img src="tooltip-icon.png" alt="tooltip" width="48" height="48"> <strong> Piece of Cake </strong> Creating a CSS Tooltip is incredibly easy. You just need to know how to go about it! </span>
And on the tooltip design, this is reflected as follows:
Now our task of implementing the tooltip design is quite straightforward. We shall create a general look for the <span> tag, position the <img> and tweak the <strong> tag. Bearing in mind that the class attribute for the <span> tag is “tooltip”, we now begin styling it as follows.
.tooltip{
background: #9FDAEf;
width: 260px;
border: 2px solid #3258B8;
color: black;
font-size: 16px;
font-weight: normal;
padding: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px 15px;
display: block;
}
Next, we position the image to the top-left corner. We do this by referencing it using the descendant selector #tooltip img, and assigning negative margin values to make it stick out of the top-left hand corner.
#tooltip img{
position: absolute;
margin-top: -28px;
margin-left: -28px;
}
Finally, we add a little styling to the <strong> tag to make it appear like a headline.
#tooltip strong{
display: block;
margin-bottom: 10px;
font-style: italic;
text-align: center;
text-decoration: underline;
}
3. Position the tooltip where you want it to appear
You can make a tooltip appear anywhere in proportion to the element. It can appear to the left, right, top, bottom or even partially over the element.
Because our tooltip uses absolute positioning, placing it precisely where you want it to appear is a piece of cake. In our case, we want it to appear below the element, slightly to the right. So, we position it using the following values (in bold) to the .tooltip:
#tooltip{
background: #9FDAEf;
width: 260px;
border: 2px solid #3258B8;
color: black;
font-size: 16px;
font-weight: normal;
padding: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px 15px;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
display: block;
}
Now that our tooltip is in the right position, we can make it disappear.
4. Make the tooltip vanish
A tooltip is not supposed to appear until the mouse hovers over the element. So, before you can implement the hover, you have to make it vanish from the screen.
There are three options which you can use to make the tooltip disappear. These are positioning, display visibility settings or display settings.
Using positioning, you can place the tooltip at a position which is off-screen. For instance, you can decide to put it 10000em to the left of its parent.
left : -10000em; Using visibility, you can set the tooltip to become invisible. You simply write:
visibility : invisible; Using display, you can set the tooltip not to display on the screen. You simply write:
display: none; For our case, we shall use display settings because we have already used it in styling the span. So we simply locate where there is “display: block” and change it to “display: none”. Our #tooltip now looks like this:
#tooltip{
background: #9FDAEf;
width: 260px;
border: 2px solid #3258B8;
color: black;
font-size: 16px;
font-weight: normal;
padding: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px 15px;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
display: none;
}
With our tooltip safely out of sight, we can now carry out the last step i.e. make the tooltip appear every time someone hovers over the element.
5. Use the :hover pseudo class to make the tooltip appear
Making the tooltip appear depends on how you made it vanish in the previous step. Whether you used positioning, visibility or display settings, you have change the respective settings to make the tooltip appear on the screen.
In our case, we used the display settings, so we shall make the tooltip by simply saying:
display: block; Making the tooltip appear when a mouse hovers over the element is implemented using the :hover pseudo class.
.tooltip_parent:hover .tooltip{
display: block;
}
This simply says that “when the mouse hovers over the parent, change the tooltip’s display property to block”. Changing the display of course causes the tooltip to appear. So, there you have it. You end up with something like we have below. You can hover your mouse over it and see if our efforts have been successful.
In a nutshell, that is how you create a CSS only tooltip. It isn’t that complicated. The template above can work in almost every scenario. The only thing you have to do is change the parent element and style up the <span> according to your design.
Learn More:
If you search for CSS tooltips, you will be bombarded with a zillion results. Here are a few handpicked links that has looks in to tooltips in good depth.
- Pure CSS Tool Tips Revisited
- Pure CSS Tooltips : Paulund
- Tooltips on hover and focus, with transitions CSS ONLY
- ARIA Tooltip Example
- qTip2 User friendly, feature rich, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support