Monday, January 24, 2005

create a hovered pop-up that can serve as a supplemental 'tooltip' with any page element

CSS Tooltips - Part Two: "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.
A Matter Of Support
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! "

No comments:

Post a Comment