Web Cash

In an earlier post, we learned how to create a tooltipKind of like this boring, gray tooltip. using CSS. I walked you through the mechanics of creating the tooltip and left the actual css styling up to you.

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

In standard HTML, tooltips seem to be reserved for anchor tags - i.e. links. They get the all-powerful “title” attribute which is turned into a tooltip.

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.
(more…)

Hover your mouse over this link to Web Cash. Notice the tooltip?

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.