|
Popup Messages / Tooltips1. Popup Tooltip using CSSThis link displays a tooltip using CSS (style sheets). A text box appears when you hold your mouse over the link. It disappears when your mouse moves off the link. The code is from www.psacake.comPsacake Code Library (Piece o' cake) using ideas from meyerweb.com CSS is a clever way to display popups without using javascript, which many people disable in their browsers for security reasons. Also javascript often doesn't work properly in other browsers. 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 <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 PopupA very simple method for popups with just a few words is to add the attribute Note that an image's 3. Popup Tooltip using Javascript#1. Mouse this text to see popup text. 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. #2. Mouse this text to see popup text. 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). RestrictionsI 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 ScriptInsert 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> Near the top of the BODY section, insert this script:
<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"
document.onmousemove=get_mouse;skn.display="none" } function popup(msg){
var content="<div class=boxpopup>"+msg+"</div>";
function get_mouse(e){yyy=OffsetY; if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"} if(ns6){document.getElementById("pdqbox").innerHTML=content;skn.display=''} if(ie4){document.all("pdqbox").innerHTML=content;skn.display=''} }
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
function remove_popup(){skn.left=x+OffsetX; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; }
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> |
||||||||||||||||||||||||||||||||||||||
The PDQ Library is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
|