Today, we’ll take a look at how to make this tooltip look a bit nicer – using a gradient background and some extra styling.

To review, here’s the basic styling to create the tooltip. Refer to the original post for an explanation of the CSS/HTML.

a.info span {
    display: none; }

a.info:hover {
    position: relative; }

a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0; }

In order to make this look a bit nicer, kind of like this tooltipThis tooltip has a gradient background, some bold-face font, and a nice border on top and bottom., we’re going have to add some more style to a.info:hover span.

First, let’s change the colors a bit, add a nicer border, add some padding, and move the tooltip down about one line.

a.info hover span {
   top: 1.5em;
   padding: 1em;
   border-top: 3px solid #d58700;
   border-bottom: 3px solid #d58700;
   border-left: none;
   border-right: none;
   color: white;
   background: #516898; }

Adding that styling would leave us with this tooltipThis looks a lot nicer, but we still need a gradient background..

I created a gradient image in GIMP. You should be able to do this in your favorite image editing program.

I made the gradient image 120px tall. I figured that’s high enough for the average tooltip, and longer ones will be covered by the standard background color. This background color should be the same as the bottom color of the gradient. That way when the gradient ends… it blends in nicely.

To add the gradient, we’ll change one line in the css declaration for a.info:hover span – the background line.

background: #516898 url
  (images/tooltip-gradient.png) repeat-x top;

Now we’ve got our final tooltipThis should be nicely styled. Looks good to me anyway..

You’ll notice a few things in the background declaration – and these hold true for any time you use a gradient background. I included a color – which is equal to the bottom end of the gradient. This way it can blend in if the tooltip becomes longer than the gradient image.

I included repeat-x – which means that the gradient image will be repeated every 1 px along the x-axis. This let’s you expand the image to the full width of the block, but only have to load a nicely small 1px wide image. I also included top to make sure that the gradient appears all the way to the top of the tooltip’s box.

Well there you have it. Once you get the mechanics of the tooltip down, it’s pretty simple to add extra styling like a gradient background image. All you need to do is create your own gradient and tailor the colors to your own needs.

Happy tool-tipping.

There are plenty of other times that you’d want to use a tooltip, though. If you’re wondering how, check out this previous post on how to create a custom tooltip with css.

Otherwise, read on for some thoughts on when to use these tooltips.

5. Definitions of Words

One interesting way to use custom tooltips is to show the definition of a word. This would be great for educational sites that aim to teach their users about a given subject. Rather than link to a new page with information on a word, just include a brief explanation in a tooltip.

Likewise, this could be used on coding tutorial sites to pop-up information on built-in functions and such. Hmm… do I smell a useful WordPress plug-in?

4. Movie/Book/Television Spoilers

Do you write about movies, books, or tv shows? Well, I don’t. But if you did… you might want to share spoilers and other information with your users.

The problem is that not all users want to have the ending spoiled for them. I saw a similar thing used in a forum – all spoilers had to be wrapped in a bb-code tag that made them invisible until you moused-over them.

This way users can choose whether or not to learn the ending of the story. If you leave it out on the screen, they might read it by accident and blame you for ruining the whole thing.

3. Citations and Source Quotes

Do you find yourself quoting other sources often? Maybe your blog is a bit on the literary or academic side?

You could use these tooltips to contain footnoting and citation information. Rather than clicking a link to go to the bottom of the screen (i.e. Wikipedia style), have the information pop-up on a tooltip.

I know that when I’m reading a book I’m far more likely to pay attention to footnotes that are on the same page than footnotes at the end of the chapter or book. Convenience is key.

2. Puzzle or Logic Game Tips

Do you have some kind of puzzle, quiz, or game on your website? People love a challenge… but they hate a game that’s too hard.

The solution, of course, is to offer the user hints. These can’t be readily visible, though, or it’ll spoil the game.

With the tooltip, the user can easily mouse-over some text that says “First Tip,” to get a little hint without opening up a new window. Convenient indeed.

1. Instructions and Information for Forms

I’m not a big fan of extra text hanging out on a form telling a user what to do. It seems to get in the way and detract from the look of the form.

Instead, use a tooltip over the label (or add a “?” for the tooltip) to tell the user what to enter in a field. That way you can include lots of information – so much that you might find it to be over-simplifying – and the user won’t have to read this “help” unless they actually need it.

You help the confused users without turning off the savvy ones.

What Else?

I’m sure there are dozens of other ways to use custom tooltips. Got some ideas?

Then leave a comment. I’d love to hear how you’d use them.

You can achieve a tooltip like that on any anchor text by defining a “title” attribute. However, it will also be bland, yellow, and un-styled. You can’t control the size of the box, style of the font, or the general appearance of the tooltip at all.

But there’s a better way. This tutorial will show you how to create custom tooltips using simple, valid HTML and CSS. Once you’ve created the basic tooltip, you can style it to your heart’s content.

Before diving into the code, we should take a look at the CSS/HTML mechanics that we’ll need to build this thing. If you feel confident that you know everything… then feel free to skip ahead. Otherwise, read along.

First, let’s take a look at our goal. We need to…

• Create a box to hold the tooltip.
• Make the box invisible.
• Make the box visible once we mouse over our target text.
• Make the box appear “above” the page, instead of inline with the page.

Now It’s Here, Now It’s Not – Pseudo Classes

In order to make our box appear and disappear, we need to use a little html/css magic called pseudo-classes. Without these, we’d have to use javascript to detect when we mouse-over the target text.

Anchors (<a>) tags have a few built in pseudo classes – a:visited, a:active, and a:hover. This allows you to style different types of anchors differently. For example, an anchor tag will usually change color when you hover over it.

We’re going to use this to make our box appear and disappear. The box will initially be invisible. Then, using the a:hover pseudo-class, when we hover over the anchor tag the box will become visible.

Creating a Box – Holding the Tooltip

In order to display our tooltip and make it appear and re-appear, we need to create a container for it. Then we need to position it.

What’s the natural container tag? A <div>. Unfortunately, Internet Explorer doesn’t like the <div> tag, so we’ll use a <span> tag instead. To hell with semantics. It’s still valid html.

Initially, this <span> is going to be styled with display:none. Then, when the a:hover becomes active, it will switch to display:block.

We also need to position the span so that it appears “above” the rest of the page. We’ll need two css attributes to do this. First, we’ll give the anchor a position:relative declaration. Then, we give our span a position:absolute declaration.

This will make the tooltip hover above the rest of the page – and it’s position will be based on the relative position of the anchor text.

Building the HTML and CSS

Now that we know the basic building blocks, let’s look at the actual markup.

Here’s the HTML you would use to create the tooltip.

<p>Here’s some more sample text.  This 
  <a class='info'>anchor<span>CSS tooltip.  We 
  can style this!</span></a> has a css-based tooltip
  that we can style to our liking.</p>

There’s three basic elements here. The regular text – enclosed in a p tag. Our target text is enclosed in an anchor tag with class “info.” The actual tooltip is in a <span> tag inside the anchor tag.

Now, let’s look at the css necessary to make the tooltip magic work. This is the barebones version – we’ll style it a bit later.

a.info span {
    display: none;
}
 
a.info:hover {
    position: relative;
}
 
a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This sets up what we discussed before. The tooltip <span> is initially invisible. Since it’s inside the anchor tag, we can use the a.info:hover span declaration to style the <span> differently when the anchor is hovered over – and then we make the <span> appear.

Voila! Tooltip.

Mouse over this textThis is the barebones tooltip. to see what we’ve built so far.

At this point, you’ll probably see a blur of text appearing on top of some other text. Not very readable… but that’s because we haven’t styled it yet.

Mouse over this textNow this has a bit of styling. to see a slightly styled tooltip.

We added a few things here – I styled the basic a.info so that it had a different color and no text-decoration. Then I styled the span with a bunch of stuff – background color, border, text color, width, and padding.

I also used position:top to offset it 1.5em from the top-left of our anchor, and position:left to offset it 1.5em from the top-left of our anchor.

Here’s the new css…

a.tooltip {
color: gray;
text-decoration: none;
}
 
a.info span {
display: none;
}
 
a.info:hover {
position: relative;
}
 
a.info:hover span {
display: block;
position: absolute;
top: 1.5em;
left: 1.5em;
background-color: #eeeeee;
border: thin solid black;
color: black;
width: 12em;
padding: .5em;
}

And that’s about all there is to it. With the html and css you built in this tutorial, you’ve got the mechanics needed to build your own tooltip.

It’s up to you to style it according to your site’s theme and make it pretty. You could add a gradient background, style the font for some extra spacing and/or size, set the width to the way you want, and more.