Textbox on mouseover Tooltip Tutorial - using CSS to 'pop-up' text and images.

An Alternate to the Native Tooltips in your Browser

... using spans and other CSS stuffs ...

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 Test Image Here
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 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://"javascript:void(0)" which in most browsers does nothing. 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 lack of the "javascript:void(0)" as an anchor value, so I recommend 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.

Forcing Multi-line Tooltips

This is an example of a multi-line tooltipSample
Multiline
Tooltip
Text Here
for the purpose of demonstrating the tooltip suggestion found at Clugnut.com, using the control character "&#013". Actually, it fails in the Tooltips using the method I demonstrate, but adding the "&#013" in a normal Title value does work for regular html tooltips. Hover on the hyper-link for clugnut to see a multi-line, regular Tooltip. Nice feature. Thanks to clugnut.com for pointing that out...

In order to have Multi-line Tooltips using my method, simply add an html "<br />" where you need to force the break within the information within the span for the Tooltip. Works for me...

Width Issues

One concern which I'll be looking at soon is the "width". If the tooltip is too close to the edge of 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

Sample of a Regular tooltip:

This is an example of <a class="info" href="#">display text<span>Tool Tip Text Here</span></a> for the purpose of demonstrating the plain old everyday tooltip.

Produces the output shown here:

This is an example of display textTool Tip Text Here for the purpose of demonstrating the plain old everyday tooltip.

Sample of an Image tooltip:

This is an example of <a class="info" href="javascript:void(0)">display text here<span><img src="/path/to/images/Imagename.png" /><br>Tool Tip Text Here</span></a>

Produces the output shown here:

This is an example of displaying an Image Test Image Here
Some text about Realtors here.
for the purpose of demonstrating a use of the tooltip.

Sample of a Hyper-linking tooltip:

This is an example of <a class="info" href="http://www.jlhaslip.trap17.com/samples/index.html">hypertext link<span>Tool Tip Text Here</span></a> for the purpose of demonstrating the use of the hyperlinking tooltip.

Produces the output shown here:

This is an example of hypertext linkTool Tip Text Here for the purpose of demonstrating the use of the hyperlinking tooltip.

Sample of a Tooltip on an Image:

Sample Tool Tip Text on an Image Here

NOTE: Opera 9 does NOT work with this method. Seems there is a problem with z-index which I will endeavor to fix as quickly as possible. Thanks to justsomeguy at the w3schools forum for pointing this out to me.

Another text box on mouseover link box

link1: go to google

link2: go to msn

link3: go to DIC

x Click to close
Yet another textbox on mouseover
More textbox on mouseover












Untitled Document

Dr Julian's Research