Styling Tooltips

This is an example of display textSample Tool Tip Text Here for the purpose of demonstrating the plain old everyday tooltip, except this one is different. With this version of the tooltip, you are able to modify the colours of the backgroundThe main block of the Tooltip, the borderThe outline colour of the tooltip, the border's widthLeft to Right measurement, and the contentsThe colour of the Text itself can be different than the colour of the text on the page, too. of the tooltip. As you can see from that last one, the Tooltip can be fairly large. It automagically creates several lines from the text you provide.

Including Images

And that's not all. Don't sell your house
Some text about Realtors here. yet ... We aren't done explaining about TooltipsLittle "pop-up" blocks of text and how they can be Images., too. In case you missed it, that last one has a picture inside the TooltipWOW! That is neat....

Hyperlinks, too

This is an example of a clickable hyper-link to the Trap17 Forumsa clickable link for the purpose of demonstrating the plain old everyday tooltip can be put to work for you. The tooltips in the first two paragraphs are set to hyper-link to http: // "#" which in most browsers is the top of the current page, so you get a refesh of this page. In most Browsers, Opera being the exception so far as I can see, the tooltips work fine with any or no http reference included in the href, but some do not like the absence of the "#", so I reccommend having them there. Opera also has some bugginess to it. I'll be sourcing out a repair/hack and see if it can be set to working better and I will post the results here.

Width Issues

One concern which I'll be looking at soon is the "width". If the tooltip is too close to the browser screen, the tooltip can overflow outside the Browser edge, so the tooltip is then unreadable. The bottom of the tooltip will also be hidden if it is placed too far down. I have included a sample in the bottom right corner of this page to demonstrate that effect. For now, set a margin of approximately half the width of the tooltip width and results should be okay. The position of the tooltip text is adjust by the offset in the position: absolute attributes. I believe you can set them as px, ems, or whatever you like.

Example code