Tool Tips

Tool tips are small pop-up boxes that appear when your cursor goes over an active piece of text. The text can be a link like the BBC news which is also an active link you can click, or a double-underline like this if you use the stylesheet described below, or anonymous text like this - try hovering the mouse over the word anonymous.

Tool tips like this work in Internet Explorer and Firefox but have not been tested in other web browsers. So they are fine to use for a local project, but are not industrial strength code!

Now here's a little story, to tell it, is...

Steps to tool tips:

  1. In your HTML file you must link to a JavaScript file which has the code to do the tool tips and, optionally, to a style sheet by putting the following two lines in the HEAD of your document:
    2. <script type="text/JavaScript" language="JavaScript" src="http://www.hatii.arts.gla.ac.uk/sww/js/ttips.js"></script>
    <link rel="stylesheet" href="http://www.hatii.arts.gla.ac.uk/sww/css/ttips.css" type="text/css" />
  2. Wherever you want a pop-up tool tip, change the web link from something like this:
    <a href="http://news.bbc.co.uk">BBC News</a>

    by adding commands to pop-up the tooltip when the mouse is over the link and tohide the tooltip when the mouse moves away:

    <a href="http://news.bbc.co.uk" onMouseOver="ttip(this,'Here is the news');" onMouseOut="ttipoff();">BBC News</a>

Copy the part in bold above into your link exactly (substituting your own text for 'here is the news') and make sure you have the same pattern of single and double quotes.

If you want a tool tip on a word that's not a link you need to surround the text with <span> tags andoptionally give the class name "dotlink". Contact me for more information!

Option:

The above method means your tool tips work only as long as you are connected to the internet and as long as the Hatii web pages are accessible. If you want to copy the two files to your own web server so you always have them, do this:

Stephen Woodruff