Image tips for links using CSS

This is a demo link with an image tooltip, so to say: the summer-generation Map butterfly.

Let us suppose that you are looking for a way to do the following: when the pointer is moved over a particular link, some image that you specify would appear near the link, somewhat similar to how a “tooltip” text appears (on most browsers) when the pointer is moved over a link that has a title="..." attribute. And presumably the image should disappear when the pointer is moved away.

I’m not sure whether such behavior would make sense. But let’s assume that in some situation, it would.

There’s no way to do such things in HTML. You would need CSS, JavaScript, Flash, or something else. There are several possible approaches, but many CSS methods would fail to make due note of the CSS Caveats, i.e. would fail fail to work when CSS support is off. In particular, if the image is included as document content, via an img element, then the image or its alt text would appear as part of the content statically.

Here is my suggestion:

HTML markup

The basic idea is to add an empty span element inside the link element, so that you can make the image appear in it:

This is a <a href="..." class="imgtipped">link<span class="imgtip"></span></a> with an image tooltip.

CSS code

.imgtipped:hover {  position: relative;  }
.imgtipped:hover .imgtip {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 108px;
  height: 126px;
  background: url(test.jpg); }
* { line-height: 1.2; }

In the example, test.jpg is a 108 by 126 pixels image. The bad news is that you need to hard-code the image dimensions in HTML. (However, an exact match is not needed: if the image is larger than the dimensions you specify in CSS, the rest is just cut off. You can also use more refined background settings in CSS to affect this.)

On link mouseover, the empty span element inside the <a> element turns into a box of the same size as the image, with that image as background, positioned relatively to the <a> element content so that it appears below it, left-aligned with it, and with a large z-index value so that it appears on top of other content.

The top property value 1.2em has been chosen to match the the total height of a line, including linespacing, as set using the line-height property. This way, the user can click on the image as well in order to follow the link. In the first version of this document, the top value was larger, creating a small gap between the link text and the image. This often prevents the effect of clicking on the image, since the link loses the over status, causing the image to appear and the span element shrink away—except perhaps if you are fast enough. Try this: nasty link?

Border best included in the image

If desired, you could set a border for the box in CSS. However, then an empty transparent rectangle with a border would appear on mouseover, if image loading is disabled in the browser or the browser just doesn't get the image for some reason. Thus, it is more robust to make any desired border a part of the image, using your favorite image processing program.

Problems

On the Opera browser, this technique often fails to work. The image might not appear or it might appear rather far from the link.

On different browsers, there is a potential problem if you position the tooltip image box as suggested here, i.e. below the link. If the link is near the bottom of a page, the image might not be visible as a whole. It would also be difficult to the user to scroll down to see the entire image, since if he uses the mouse—as most people would—the mouseout event would remove the image. The simple precaution is to add some content below the link.

Here is the demo link with an image tooltip again. It appears at the end of the page content proper, but followed by a footer. To reserve space for the image tooltip, I have set some extra spacing (margin) before the footer. The link: the summer-generation Map butterfly.