Working With Images in PHP - Part 1: Rotation
Topaz Simplify 3 Review
Happy Labor Day!
The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Page 1 of 4 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:
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.
Keywords
CSS, tooltip, popup, pop-up, :hover, mouseover, title attribute, faux tooltips, display properties, absolute positioning,
