Friday, January 14, 2005

CSS Tooltips - Part One

CSS Tooltips - Part One:
By: John Gallant , Holly Bergevin ,

“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:

Tooltip Talk

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.”


http://www.communitymx.com/content/article.cfm?cid=4E2C0

No comments: