Looking to use a customized tooltip? Don’t want to deal with jQuery? You’ve come to the perfect place! I will show you how to create a tooltip using only html and css.

You might have a normal link like this that you want to use the title attribute for the tooltip:

This is fine and dandy until you want to customize it. You might want to add some padding to it, change the text/background color, etc. Using the title attribute, you cannot customize it at all. So we turn to CSS.

Here is the HTML for some text:

Here is the CSS:

Here is the tooltipSomething something in this tooltip that uses the above html and CSS.

It depends on what’s going to be in the links themselves. If the client wants full on images (including the text in the images), I’d usually just use an <img> with an <a> wrapped around it, as it’s simple and works in all browsers.

Alternatively, with the same tools, if I want to get tricky and keep as much as possible in the CSS (and I usually do), I prefer to set in an <> with the following css

Doing the above allows for easy image swapping, hovers, etc and should work in all browsers as well.

If we have more free reign, and the fonts are web standard, then I would do something similar to the above, but the background image would only be the icon. Going straight off my crazy-morning brain without looking at an editor… something like you have below might look like this:

This would be the HTML:

Now for the different ways of setting opacity…

For Internet Explorer:

For Mozilla:

For Safari (current):

This is the important one. It is the current standard supported by Safari, Opera and Firefox

For Safari (old):

This is for older versions of Safari, back before it adopted webkit (which is what you use for something like round borders).

The Problem: You’re trying to create a simple form but there is a gap above and below where your <form> and </form> tags are.

The Solution: This only requires you to add one line to your CSS. Style the form element to display inline.

It might look something like this:

The code:

This is a form without a gap in it.

The CSS:

Fixing this will only require you to add one line to your CSS. Style the form element to display inline.

Now it looks all pretty:

The CSS:
[cc lang=”css”]
form {
display: inline;

.blueBoxBody {
padding: 10px 0 12px 0;

.blueBoxBody p {
margin: 15px;

.blueBoxBody input {
margin: 0 0 0 10px;

Note: This method fixes the gap in IE6 and IE7. There is no gap that appears in IE8, Firefox 3.5 nor Google Chrome. To hell with IE6.

What You Want To Do: You have a horizontal (or vertical) menu list – when you hover over each item, you want it to “change” so that it indicates you’re mousing over it and you don’t want to use Javascript to accomplish this.

How To Do It: Instead of “swapping” out the original image and the image you see when you hover over, we’re going to make the original image go away. Think of this as a disappearing act.

First, I’ll show you what my horizontal list looks like:

The code:

So there I have inserted the images (normal state) into the <li> tags of my menu list. Next we’re going to add some CSS styles.

In my case, I want a horizontal list that does not have bullets, so I will need to make the <li> tags display inline, else it will give me a vertical list and style the list style type with none. Make sure you add the display block style to the li’s a element. If you don’t do that, the images will flicker when you hover over them. Try it with and without that style and you’ll see what I mean.

You’re going to have different images for each menu item so you’ll have to give each item a separate class. Then in the CSS, you’ll give each of those classes a different background image to use which serves as the hover image.

Also, you’ll need to style the a element (with the image) when it’s being hovered over. When you hover over the item, you want to give it the effect of swapping/changing. What we’ll do here is add a visibility styling (hidden). That way, when you hover over the <li> (that already has a background image) it will hide the normal state image and display the hover image (background image).

Here’s my menu when you hover over “Home”:

The CSS looks like this:

With the Javascript method I previously posted, you have to preload the images. With this CSS method, you do not have to preload any images. The concept of this method is easy to grasp – you have an image and then you have a different image you want to reveal when you mouse over it. For people (like me) who don’t want to mess with Javascript, this is definitely a solid method!

Note: This method is not compatible with IE6 as it does not support attribute selectors (a:hover) nor context-dependent styles (a:hover img). To hell with IE6.

What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over.

How To Do It: Use the MM Image Swap!

Put the following code between the <head> tags or a Javascript file that is called on whichever page(s) you want to swap images on.

Now, for the section that has the menu items (or images) that you want to swap, you need to call the functions. The example I’m going to give is the menu list I used, so adjust accordingly. If you didn’t use a <ul> list, then don’t copy my code exactly. Also, you’ll need to swap out the image file names, height and width, etc. to your own.

Finally, go to the <body> tag and preload the images. Again, change the image file names to your own.

The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.

The Solution: Use the style “overflow: hidden;”

The CSS looked like this:

So then, I was like: SHAZAM! and used “overflow: hidden;” and here is the result:

The CSS now looks like this:

Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try “overflow: hidden;” on the container div and it should do the trick!