PDQ Library: Popup Text / Mouseover Tooltips

Here is the basic CSS codeCascading Style Sheets, separating content and presentation style. This code has been tested in IE 5, Opera 7, Mozilla 1.4, Firefox 3. Insert this code inside the HEAD element of your web page and edit the various CSS properties as you wish. For example, you may change colour code #046 to #000 (black) or change the border style from dotted to solid.

<style type="text/css"><!--
a.boxpopup3{position:relative;
	z-index:24;
	color:#046;
	border-bottom:thin dotted #046;
	text-decoration:none}
a.boxpopup3:hover{z-index:25; background-color:#FF0}
a.boxpopup3 span{display: none}
a.boxpopup3:hover span{ /*DISPLAYS ONLY ON HOVER*/
	display:block;
	position:absolute;
	top:2em; left:0; width:12em;
	padding:.3em;
	border:2px outset #BBB;
	color:#000; background:#FF9;
	text-align:center;}
-->
</style>

2. Simple Popup

A very simple method for popups with just a few words is to add the attribute TITLE="short text" to an image (IMG) or link (A) tag. Visual browsers frequently display the title as a "tool tip" which can be used to explain what the link is for. If your software does not provide a function for adding additional items to a tag, you can simply open the entire file in NoteTab (or other text editor) and insert the TITLE code manually.

Note that an image's ALT attribute displays the text "in place of" an image in browsers that do not display images (or with images turned off). Using this as a tool tip is an incorrect use of this attribute. Use TITLE instead.

3. Popup Tooltip using Javascript

Warning: If you use this on a web page, some visitors might not see your mouseover text. Some people disable "javascript", and some web browsers will not run javascript unless the viewer changes the security settings.

When you mouse over the text above, a yellow box with text inside will appear near your mouse pointer. When you move your mouse away, it disappears. This is useful for notes, additional information, warnings, etc.

This popup is created using Javascript and CSS (style) to format the popup with a nice border, spacing and colours. I make no guarantees about its use on other systems. It was tested using browsers Firefox 1.0.7 and Internet Explorer 6.0.

You can also change any style settings for size, colour, padding, etc. You may need to use a plain text editor (Notepad) to insert the code if your web editors can't insert it properly. You may notice the second popup is a different style - you'll have to study the source code to see the popup function was duplicated (popup2) and edited to use a different style (boxpopup2).

Restrictions

I tested the script using Style #2 (above) for a popup link right at right up to the right margin - part of the popup got lost 'over the edge'. In addition, those dreaded horizontal scrollbars appeared! You'll probably have to format the page to keep popup links away from margins or use narrow "BOX WIDTH" (see below).

A DOCTYPE declaration is the first line of your web page, even before the <HTML> tag. This script was tested in a web page using an older DOCTYPE (below). It does not work with XHTML 1.0 Strict and others. [Someday I may get around to updating it for more of the recommended DOCTYPEs. People seem to love this script, so any help will be gratefully accepted! And YOUR name added to the credits.]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

How to use the Script

Insert the following code in the HEAD section of your web page - just before </HEAD> is a good place. Values for OffsetX & OffsetY affect the popup position relative to the mouse pointer. Change colours and sizes here so all popups on the page will have the same style.

<style type="text/css"><!--
 .boxpopup {
   font-family:Arial,sans-serif; /*TEXT FONT*/
   font-size:90%;		/*TEXT SIZE*/
   color:black; background:#FFFF99; /*COLOURS*/
   width:200px;			/*BOX WIDTH*/
   text-align:center; 		/*ALIGNMENT*/
   padding:4px 5px 4px 5px; 	/*SPACING*/
   font-weight:bold;	 	/*BOLD TEXT*/
   border:1px solid gray; 	/*BORDER STYLE*/
   }
  #pdqbox {position:absolute; visibility:hidden; z-index:200;}
-->
</style>

<div id="pdqbox"></div>
<script TYPE="text/javascript"><!--// patdrummond.org
OffsetX=-110; // MODIFY THESE VALUES TO
OffsetY=20; // CHANGE THE POSITION.
var old,skn,iex=(document.all),yyy=-1000;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4) skn=document.pdqbox
else if (ns6) skn=document.getElementById("pdqbox").style
else if (ie4) skn=document.all.pdqbox.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {

skn.visibility="visible"
skn.display="none"
}

document.onmousemove=get_mouse;
function popup(msg){

function get_mouse(e){

var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+OffsetX;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}

function remove_popup(){

yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

//-->
</script>

Here is the code for the example at the top of the page. Copy it where you want the text to appear. Edit the text (third line), and delete the <p> if you don't need it (just illustrates line spacing). You may change the link URL ("/"), or delete it (removes the underline).

<p align=center>
<a href="/" alt="" onMouseOver="popup('
This is the popup text. It can include most HTML code:<p>New paragraph here. <br>New line here. Edit text in red. Keep the exact syntax of the black text!
')"; onMouseOut="remove_popup()">This is the text that you mouse-over to see the popup text box.</a>
</p>

Popup Messages / Tooltips

1. Popup Tooltip using CSS

2. Simple Popup

3. Popup Tooltip using Javascript

Restrictions

How to use the Script