Page 4 of 4 What's needed is to make the span appear without having it disturb the page flow. This can be done by positioning the box absolutely, thus preventing it from entering the flow of the document when its display is changed to block. Instead of flowing normally and displacing following content (as seen in Demo 5), this new absolutely positioned (AP) box appears on a new level, or "layer" in Dreamweaver parlance. Once removed from the flow like this, it has no effect on other elements on the page, other than to cover part of them. Again, perfect!
The CSS:
a:hover span {
position: absolute;
display: block;
background: #fdd;
border: 1px solid red;
}
Some filler text... Link text ...Some more filler text...
Demo 6
Wow! That is already looking a lot like a tooltip! The background and border are under our control, along with all the other box properties. But those checking in multiple browsers will notice variances in the placement of the tooltip in relation to the link text. This is due to the fact that the current placement is controlled by the values for top and left as applied to the AP tooltip. Since we have not (yet) specified those property values, they default to auto, which is clearly subject to interpretation by different browsers.
You can read more on this topic in the article Absolute Positioning and the Top Property, but we'll summarize here. Basically, an AP box that starts within the flow of the page will base its page location on the point where it would be placed were it not positioned. In IE/Win, this point is just to the right of the hovered link, but other browsers decide to place it down one line and over to the left.
The answer here is to give the link {position: relative;}, so that its AP child will be placed in relation to this relative parent, in other words its nearest positioned ancestor. We'll also add top and left properties to the pseudo-class selector at this time as well. Let's see how it works:
The CSS:
a {position: relative;}
a:hover span {
position: absolute;
top: 5px;
left: 30px;
display: block;
background: #fdd;
border: 1px solid red;
}
Some filler text... Link text ...Some more filler text...
Demo 7
Now that's a tooltip to be proud of! Notice how the upper left corner of the tooltip is 5px lower and 30px to the right of the link text's upper left corner, just as specified in the CSS. You could also use negative values to pull the tooltip up and left if desired. This method allows complete positional control over the tooltip. Relative units such as em may be used for the top and left property values, in place of pixels, but percentages should perhaps be avoided, unless you enjoy dealing with probable browser bugs.
Mozilla and Firefox versions before Mozilla 1.7 and Firefox 1.0 are happy to allow mousing onto an adjacent tooltip, unless the link is given a position of relative. If that is done, the tooltip vanishes as soon as the mouse pointer leaves the parent link. There's no known way to fix this bug, other than to work around it. This will be discussed later in the series, but for now we can at least take comfort that the bug has been fixed in the latest Mozilla and Firefox versions, and considering the rapid uptake of Firefox 1.0 on the web, the issue will be a minor one very soon. (Kudos to Craig Hartel, CMX subscriber #1, for discovering this Gecko bug :)
So, we can now style our tooltip pretty much as we like, and have it appear anywhere on the page we desire. In fact, a CSS tooltip can even hold images, and the next part of the series will show how to apply a tooltip to non-link elements. When that is done, it's legal for extra links to be contained within the tooltip itself! Cool. However, it's not legal to have true block elements within the tooltip, such as paragraphs or divs. That's because the span parent element is not allowed to contain block elements, being itself an "inline" type of element.
You might get around this by nesting more spans within the parent span tooltip, which will be discussed further along in the CSS Tooltip series. We will also show how to apply this method to all elements, not just to links. Stay tuned, because you're going to enjoy this!
The basic hover/popup method behind the techniques described in this tutorial originally came from Eric Meyer's Pure CSS Popups demo page. Thanks Eric!
If you just can't wait, and want to experiment with tooltips that have links in them, make sure the tool tip overlaps at least a part of the parent link, or the tooltip will vanish before the cursor can reach it! That would be most embarrassing. You can use the HTML test page included in the support files to experiment with this method.
Keywords
CSS, tooltip, popup, pop-up, :hover, mouseover, title attribute, faux tooltips, display properties, absolute positioning,
