Page 1 of 2 This 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:
In Part One of this CSS Tooltips series, we covered the basic coding necessary to create a hovered pop-up that can serve as a supplemental "tooltip" explanation for a link. The next step is to arrange for this effect to be used with any page element, and not just links.
The heart of the CSS tooltip method depends on the :hover pseudo-class. The W3C makes no restrictions as to which elements may be in the :hover state. In theory this means it can apply to any page element. Most modern browsers now support this CSS 2 feature, but sadly, Internet Explorer for Windows lags behind in this area. IE/Win supports the CSS :hover pseudo-class only on link elements. It's really too bad, because having clean CSS tooltips for an image or a complex math formula would be highly desirable to most authors.
However, it happens that IE5/Win and above can be made to support hovering on any element, via a (freely available) jscript called from within the CSS file. Microsoft calls this proprietary "pathway" for the Jscript a behavior. Calling a script from within a CSS file is a non-valid use of CSS, and normally we would not recommend any such thing. But in this case it's a matter of making IE "support" a standard CSS rule that it otherwise would not.
Further, it's possible to place this "behavior call" in a separate style sheet and link that CSS into a page from within a conditional comment (also Microsoft proprietary code) that appears to other browsers as just a normal comment. Only IE will look inside and see the behavior code lurking within!
Thus, for us code purists the result is nice clean HTML and CSS, with all the invalid code squirreled away out of sight. Explorer can see that invalid code only because it is capable of looking inside HTML comments for extra code it can parse. The W3C specifications don't care what lies within any HTML comments, so the page will validate just fine.
Explorer for the Mac is the one "modern" browser that does not properly execute these tooltip-type hovers, although it is possible to get a pop-up in that browser with a certain code arrangement. Unfortunately, the IE5/Mac method is not very compatible with the primary method, and that limited pop-up is far less useful. For these reasons, and because IE/Mac is no longer being developed, we are not going to attempt a description of this IE5/Mac pop-up method.
Hopefully, having dispensed with major objections to the use of invalid code, we can take a look at this "behavior" stuff with open minds. Shall we begin?
Keywords
CSS, tooltip, tooltips, popup, popups, :hover, pseudo-class, csshover.htc, hovering elements, hover behavior, conditional comment, Jscript, [if IE], MIME-type, x-component
