The 'withtip class is intended to be used on a DIV that contains a SPAN holding the tooltip text, and some other element - usually an image in my cases - that is to be the subject of the tooltip information. The SPAN element has absolute positioning within the relative positioned DIV, and a higher z-index. This gives it the required behaviour for a tooltip. The rest of the CSS is amenable to customization. The top and left values are set here for my typical circumstances where most images are 300px wide and about 200px deep. Given that, then an HTML fragment like:
Will display as just the plain image, as here:
Tooltip text hereIf you temporarily modify the CSS so that .tt has 'display:block;', you'll see the tooltip so you can mess with the styling to suit your taste, as here:
Tooltip text hereWhat is missing at this point is a mechanism to make the tooltip appear and disappear when the mouse pointer is moved over the image. I used jQuery. Some extra functionality is included to allow placement of the tooltip relative to the target element. Ths is specified in the 'alt' attribute of the DIV>
Then the effect is as follows - move your mouse cursor over the picture.
Tooltip text hereFair enough, this is rather basic. There are no bells and whistles like automatic positioning of the tip, or formatting of the tip text, or bubble-shaped tip borders, but this is fine for me. I like to be able to tell them just where they should be, and the simple tips look pretty good. In any case, given the framework that stuff could be added. Also it does seem to be quite portable. In this case specifically Chrome has no problem ;=)