Collected by
Elizabeth Janson
Home Page

Tool Tips

  This "bubble" you refer to is kind of a pop-up textbox(usually yellow, done when you hold the cursor over the link for a few seconds right?) They are called Title Boxes.

Use <SPAN style="color:red" TITLE="bubble text">text with title</SPAN>,
text with title as the span tags can be used with anything.

This section began with a page by Joe Burns of HTMLgoodies fame.

He wrote
I received an e-mail the other day asking me if it was possible to create a tool tip for text in Web pages. Something like the alternative text for images (<IMG ALT="text">). This is possible using the TITLE attribute in HTML4. If you have IE4 and use the handy search bar, you'll notice that page descriptions are displayed in a tool tip when you hover the pages title.

This effect is really simple. In the example below, I use it to give an explanation for the word COBOL. I surround the word by a <SPAN> tag. To make the word stand out, I use CSS within the <SPAN> tag to make the word underlined and blue. The cursor is a hand when hovered over. Notice that I have inserted two non-breaking spaces after the word COBOL.

<SPAN TITLE="COBOL is an acronym that stands for Common Business Oriented Language" STYLE="color: navy; text-decoration: underline; cursor: hand; background-image: url(question.gif); background-repeat: no-repeat; background-position: right;">COBOL&nbsp;&nbsp;</SPAN>

Added COBOL   (question mark is omitted, end added).

The TITLE attribute can also be used inside any other tag. To describe a link, add it to the <A> tag.

An example, from my Pioneers site, with status bar messages thrown in, too.
<UL>
<li style="color: red"><font color="#000000">Our <A HREF="ancest.html" OnMouseOver="window.status='15 people who migrated to Australia 1818 - 1892'; return true;" title='The 15 Pioneers at the centre of our cluster of 400 families'>Ancestors,</A>
<li style="color: blue"><font color="#000000">The <A HREF="ships/gipsybride.html" OnMouseOver="window.status='Gipsy Bride brought our Arnold ancestors'; return true;" title='Gipsy Bride arrived at Melbourne 31 Oct 1856 with David Arnold, his wife Sarah Russell, sons William, David and Frank and brothers Thomas 18 and Charles 16. We do not know where his brothers went, after helping David get established.'>Gipsy Bride
</UL>

There are also a few options when it comes to formatting the text inside the tool tip. The command &#13; will insert a carriage return wherever it is placed. &#10; creates a linefeed (to my eyes, these two commands to the exact same thing. Correct me if I'm wrong). You can also enter tab spaces by using the &#09; command. I also have to mention that there is a 1024 character limit for the tool tips. I think this is generous enough. If you need anything more, you may need to ask yourself if a tool tip is the right thing.

Thanks Joe.

And another thing - there needs to be no whitespace between the quote sign ending the tip, and the closing >.

When all else fails, combine TITLE and Java Script

Short    Long    Medium    Long    No more messages

Here is the code behind those five examples

In the <HEAD> 
<STYLE TYPE="text/css"><!--
#tooltip {position: absolute; width: 150px; 
	z-index: 100; visibility: hidden}-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var uagent = navigator.userAgent;
var appver = navigator.appVersion.substring(0,1);
function showTip(ctrl, tiptext) 
{	
var tipdiv;
	
if (uagent.indexOf("MSIE") != -1) 
{		if (appver > 3) 
{
// in IE all we need to do is set the "title" attribute
ctrl.title = tiptext;			
}	
} 
else 
{
if ((uagent.indexOf("Mozilla") != -1) && (appver > 3)) 
{
tipdiv = document.layers["tooltip"];
	// set the tooltip text
tipdiv.document.open();
tipdiv.document.write("<TABLE BORDER=1 
	CELLSPACING=0 CELLPADDING=2 
	bordercolor=black><TR><TD BGCOLOR=FFFFCC>");
tipdiv.document.write("<FONT FACE=Verdana, Arial, 
	Helvetica SIZE=-2>");
tipdiv.document.write(tiptext);			
tipdiv.document.write("</FONT>");
tipdiv.document.write("</TD></TR></TABLE>");	
	tipdiv.document.close();
// set the tooltip location and show it			
tipdiv.top = ctrl.y + 20; 
tipdiv.left = ctrl.x + 10;			
tipdiv.visibility = "show";		
}	
}
}
function hideTip() 
{
if ((uagent.indexOf("MSIE") == -1) && 
(uagent.indexOf("Mozilla") != -1) && (appver > 3)) {
	// only do this for NN4+	
	document.layers["tooltip"].visibility = "hidden";
}}
// --></SCRIPT>
And where the items are wanted 
<DIV ID="tooltip"></DIV>
<A HREF="#" onMouseOver="showTip(this, 
	'Short tooltip')" onMouseOut="hideTip()">Short</A>
<BR><BR>
<A HREF="#" onMouseOver="showTip(this, 
'Click here to see more cool tips! \n 
This is the second line...\n change line 
with backslash n..\n only works with IE')"
 onMouseOut="hideTip()">Long</A>
<BR><BR>
<A HREF="#" onMouseOver="showTip(this,
 'The next tooltip uses TITLE instead')" 
onMouseOut="hideTip()">Medium</A>
<BR><BR>
<A HREF="#" OnMouseOver="window.status='Tooltips 
used in TITLE for IE'; return true;" 
TITLE='Click here to see more cool tips! \n 
This is the second line...


fourth line, 
after skipping one line'>Long</A>
<BR><BR>
<A HREF="#" onMouseOver="showTip(this, 'No ')" 
	onMouseOut="hideTip()">No more messages</A>

Email
CSS begins here
Back to more positioning or on to cursor choices.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.