Tooltips Make a Comeback with CSS3

By Michael Rohde

Old School Tooltips

Way back in the day, tooltips were a very popular method in software applications to provide useful information about a particular feature. Users could hover over a button or a feature and a friendly little message would appear with helpful information. As time passed, tooltips slowly faded away as the internet gained in popularity. Instead of using tooltips, software could now link to a website to show help. On websites, tooltips were used for a while in the same sense that it was used in software, for sake of familiarity. However, as sites evolved, tooltips were replaced with Help pages or even forum posts.

New CSS3 Tooltips

Now, with the help of CSS3, tooltips are making a comeback in that they can be styled in different formats. In the early days, all tooltips were basically yellow boxes with black text. By styling your tooltips in CSS3, you can create multiple formats to present different types of information. Your tooltips can include images and links, which can provide very useful information to your visitors without them needing to click through to a different page or open a new window.

When I implement new formatting functionality on my site, I like it to have a very definite purpose. Using eye candy just because you can is not good web design. To create a better user experience for the visitors of my site, I discovered that using tooltips can be very beneficial. For example, many articles have several links. Some links might point to purchasing something on Amazon, or another link might point to a video and another link might direct the visitor to another website. It would be nice for my visitors to know where they are going before they click the link. Therefore, by adding customized tooltips to my links, when visitors hover over a link they will know if they are going to Amazon, YouTube or a secondary site. I'm sure you can come up with many reasons for using tooltips yourself. For example, if you're writing technical documentation, you might want a Warning tooltip, or a Helpful Idea tooltip or a Cautionary tooltip.

CSS3 Tooltip Code

Let's jump into the code to see how it's done. First, define the tooltip class.

.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}

The first line of code adds a dotted line under the link to provide a visual clue to the visitor that the text contains a tooltip.

The second line of code makes a small question mark appear next to the cursor, which provides another visual clue to the visitor that the text contains a tooltip.

The third line of code helps with positioning.

The following code will hide the tooltip elements until the are needed by placing them off the page.

.tooltip span {
margin-left: -999em;
position: absolute;
}

At this point, your tooltip will not work. You need to add in a hover element that triggers the tooltip to appear:

.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 350px;
}

This code formats the tool tip with a rounded border, which has been discussed in a previous article.

CSS3 Tooltip Formatting

Now, let's add some formatting so you can include images within your tooltip. At first thought, you might think this will make the tooltip look busy or cluttered, but if done correctly, it can add a very pleasing affect.

.tooltip:hover img {
border: 0; margin: 10px;
float: left;
}

Next, here's a little extra formatting if you want to differentiate a sort of header from the rest of the tooltip text:

.tooltip:hover em {
font-family: Arial; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}

To put the finishing touches on the tooltip box, it's good to add in a background color, padding and a border:

.tooltipbackground {
padding: 0.8em 1em; background: #000; border: 1px solid #999;
}

And to wrap this up, simply put in the HTML:

<a class="tooltip" href="#">Some text here<span class="tooltipbackground"><img src="Images/image.jpg" alt="image text" height="48" width="48"/><em>Header</em>Tooltip text</a></span>

For a working demo of the tooltip text and other CSS3 tricks, check out my CSS3 playground (the custom CMS used for this site mangles CSS code, so we are not able to provide a working example on this page).




Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •