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.

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.

Tags: css, gradient, html, image, tooltip