The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScriptThis tutorial is meant for those familiar with basic CSS syntax and usage. If this is not you, The following discussion will make more sense after you have studied these articles:
A common part of modern web pages and applications are those handy little text boxes that pop up when some elements are moused over. In web pages these tooltips are usually generated via the title attribute, which can display a small bit of explanatory text for that page element, without otherwise cluttering up the page. This is often quite helpful, but the display of the title attribute is in the hands of the browser, and they all have different ideas about how to handle them, particularly when the text is long enough to need more than one line.
Other than depending on browsers' displays, there is no author accessible mechanism to style these attribute-based "tooltips." There are oodles of JavaScripts that will dynamically create "faux tooltips," but if one wishes to avoid JavaScript, then it's been the boring title attribute "tooltips" or nothing at all. If only there was some way of forcing CSS to style those "tooltips"!
Well, CSS can't actually style browser-based "tooltips," but CSS can create "faux tooltips" much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in's and out's involved, but surprisingly, the methods are rather easy to accomplish.
First, these methods do not work at all in Internet Explorer for Mac. Unfortunately that's just the way it is. While that abandoned browser is on the way to obscurity, for those still using older Mac OSs it is still a browser of choice. At some undefined point in time, each developer will have to decide when to drop support for good old IE5/Mac.
The major problem is in Internet Explorer for Windows. In a nutshell, IE/Win cannot normally obey the method outlined in this tutorial, except when it is applied to link elements (anchor elements, <a>). While this greatly reduces the utility of the method, there is a way of forcing IE/Win to apply the method to all elements which will be explained in Part Two of this tutorial. For now we will concentrate on the basic method itself. Don't worry, you won't be left in the dark for long!
Mozilla and Firefox versions before Mozilla 1.7 and Firefox 1.0 have a problem when mousing onto certain types of CSS tooltips. This will be briefly discussed later in this tutorial, as well as in future tutorials in this series.
Lastly, the Safari browser has a slight clipping issue with more advanced versions of this method, and that issue will be discussed when it becomes *ahem* an issue (sorry). Still, the problem can be mostly worked around, so for now don't worry about it.
The demos in this tutorial require that special selectors be added to our main CMX style sheet. If the demos do not appear to be working as described in the text that accompanies each (as happened for one of the authors), please force a browser refresh or clear your cache so that your browser retrieves the most current CMX style sheet.
In this tutorial, we'll look at creating tooltips for link elements. The HTML construction is actually rather simple. First, discard any title attribute on the link so it won't interfere with our new styled tooltips, leaving a simple basic text link:
The HTML:
<body>
<p>
Some filler text...
<a href="#">Link text</a>
...Some more filler text...
</p>
</body>
The HTML in Code Block 1 will display as below. We've added a background color, a border and a little padding to the paragraph to set the Demo 1 apart from the surrounding text.
Some filler text... Link text ...Some more filler text...
Demo 1
The CMX style sheet applies a light blue background color to all hovered links, which we have allowed to continue because we think it looks nice. :-)
Now we insert our tooltip text between opening and closing <span> tags, and place the span element inside the link, along with the actual link text. Note: The span can come before or after the link text, it's your choice.
The HTML:
<body>
<p>
Some filler text...
<a href="#">Link text<span>Tooltip text!</span></a>
...Some more filler text...
</p>
</body>
So far we have code that will produce the result shown in Demo 2.
Some filler text... Link textTooltip text! ...Some more filler text...
Demo 2
A plain span element that is placed around some text changes nothing at all, except to add more text to the link. Obviously something needs to be done to the span, and CSS allows us to do just that. The first step is to get rid of the span. Say what? Yes, the span has to go, but we will bring it back in due course, for a new and better role.
We can hide the span via the CSS display property, using a value of none.
The CSS:
a span {display: none;}
This rule completely removes the span from the page display, leaving nothing, not even an empty space. Demo 3 now looks like our original. Perfect.
Some filler text... Link text ...Some more filler text...
Demo 3
While the span is indeed gone, it is not forgotten. It still exists in the HTML, even if it is no longer displayed. It can easily be brought back by changing the value of that display property to inline. But if we did that we would be right back where we started. The trick here is to change the display value only when the link is hovered.
Again we can easily do this via the :hover pseudo-class, which applies styling to an element only while the element is being moused over. It's the same method CMX uses to give the links a light blue background color when they are hovered. The CSS for our tooltips will look like this:
The CSS:
a span {display: none;}
a:hover span {display: inline;}
This keeps the span text off the page until the link is hovered. When the hover event occurs, the span text is then jammed in next to the main text, displacing any following text further along in the page flow. Check it out by hovering the link in Demo 4:
Some filler text... Link text ...Some more filler text...
Demo 4
Notice that you can move your mouse directly from the link text onto the span text, and the hover behavior is maintained. This effect will be employed later on in the series.
One IE/Win bug that takes a little planning to solve will happen when the
display on the span gets changed while hovering the link, as we are doing here.
IE/Win refuses to make this display change, unless at least one among a group of
particular CSS properties on the link are changed at the same time.
We don't know why, and neither does anyone else.
Changes to background, or certain of the text-related properties
will "activate" the display change in IE/Win. In our support HTML test
file we simply applied {font-size: 100%;},
which does the trick very nicely. Another very slick fix is to us apply
background:; to the links on hover. Even with
no actual value applied as a background, IE/Win seems to be happy with it and
performs the popup as desired. Of course if you are causing a real background change
on hover then that will do fine by itself.
Clearly it's not that IE/Win needs one of these properties to actually change on
hover. No, what it wants is just to see background or font-size
or one of the other properties that affect this bug, appearing within the link hover rule.
The value applied to the property is apparently unimportant, and can even be left out!
In the tutorial you are now reading, we didn't need to add a specific fix, because
the link background color already changes on hover due to the CMX style sheet itself
(as shown in the next code block).
Although the hover effect is getting interesting, that span popup hardly resembles a typical tooltip yet. We might now apply some color and font-size styling to that span via the same pseudo-class (:hover), or even a colored background similar to the CMX hovered link background we mentioned above, applying it only to the span. Hmmm, what about padding around the text? Unfortunately, padding needs a box to live in, and our inline text span can't have padding. Or can it?
Well, if the span were a "block" element rather than "inline", then box styles could be applied to it, and of course the display property certainly can accept values other than inline. The value we would like the a:hover rule to apply for the span is {display: block;}, so let's go ahead and do that!
Let's re-display our span as a block element so we can then apply box styles to it, using the following declarations applied via the a:hover rule:
The CSS:
a span {
display: none;
}
a:hover {
background-color: #dbe4f2;
}
/* The above hover change defeats the
IE/Win display changing bug */
a:hover span {
display: block;
background: #fdd;
border: 1px solid red;
}
Some filler text... Link text ...Some more filler text...
Demo 5
Right away you will notice a major problem with Demo 5. Making that span a block element causes it to act like one! This means it will move to its own line and take up all of the space available to it. If this is the effect you desire then we are all done, but most authors won't want the new block element forcing the remaining page content down and up with each hover. Someone could get seasick!
When the above demo is hovered and then unhovered in Gecko browsers, the text does not return to a single line, but instead remains displayed on two lines. Other browsers correctly restore the text to a single line within the paragraph at the end of the hover event. However, the Gecko problem will not occur with the more advanced tooltip method we are about to describe, so don't be too concerned.
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,
