Textbox on mouseover
... using spans and other CSS stuffs ...
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.
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....
This is an example of a multi-line tooltipSample
Text Here for the purpose of demonstrating the tooltip suggestion found at Clugnut.com, using the control character "
". Actually, it fails in the Tooltips using the method I demonstrate, but adding the "
" 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...
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.
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.
This is an example of display textTool Tip Text Here for the purpose of demonstrating the plain old everyday tooltip.
This is an example of displaying an Image
Some text about Realtors here. for the purpose of demonstrating a use of the 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.
This is an example of hypertext linkTool Tip Text Here for the purpose of demonstrating the use of the hyperlinking tooltip.
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.
link1: go to google
link2: go to msn
link3: go to DIC