Not a Member Yet,
Click here to Register
How do you like the new design?
It's cool, great job
[tally: 70%] 70%
It's okay
[tally: 20%] 20%
Its OK but I liked the old layout better
[tally: 0%] 0%
Please bring the old one back
[tally: 10%] 10%

votes: 10

ID: 80
Viewed: 3137
Added: Feb 13, 2002
Version:
Snippet uploaded by: snippet
Written By: unknown
Demo: Sorry, no demo



User Rated at: 0 Stars
Rate This:

Thank you for your vote. Please wait...

It appears you already voted for this snippet

It appears your vote value was empty

This will display tool tips when you scroll over links. The main advantage is that you can change colors of the tool tips and have images in the tool tip.

Browsers: IE4.0+ and NS4.xx & NS6


<!---Head--->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Basic Tooltip</TITLE>
<STYLE TYPE="text/css">
<!--
body { font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt; }

h1 { font-size:12pt }
ul li { list-style-type:none; margin-bottom:6pt; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// This code is from Dynamic Web Coding
// www.dyn-web.com

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

// avoid error of passing event object in older browsers
if (nodyn) event = "nope";

// preload image(s) to appear in tooltip
var img1 = new Image(88,88); img1.src = "images/smile.gif";

// messages for tooltip display
msg1 = "The tooltip can contain HTML, even images."
msg2 = '<CENTER><IMG SRC="images/smile.gif" BORDER="0"></CENTER>Some text can go here too.';

// settings for tooltip
var tipWidth = 150;
var offX = 12; // how far from mouse to show tip
var offY = 12;
var tipFontFamily = "Verdana, arial, helvetica, sans-serif";
var tipFontSize = "8pt";
var tipFontColor = "#000000";
var tipBgColor = "#FFFFCC";
var tipBorderColor = "#000000";
var tipBorderWidth = 1;
var tipBorderStyle = "solid";
var tipPadding = 4;

var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = (ns4)? document.tipDiv: tooltip.style;
if (ns4) tooltip.width = tipWidth;
else if (ns5) tipcss.width = tipWidth;
else if (ie4||ie5) tipcss.pixelWidth = tipWidth;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.fontColor = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth;
tipcss.padding = tipPadding;
tipcss.borderStyle = tipBorderStyle;
}
}
window.onload = initTip;

function doTooltip(evt,txt) {
if (!tooltip) return;
if (ns4) {
tip = '<TABLE BGCOLOR="' + tipBorderColor + '" WIDTH="' + tipWidth + '" CELLSPACING="0" CELLPADDING="' + tipBorderWidth + '" BORDER="0"><TR><TD>
<TABLE BGCOLOR="' + tipBgColor + '" WIDTH="100%" CELLSPACING="0" CELLPADDING="' + tipPadding + '" BORDER="0"><TR>
<TD><SPAN STYLE="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + tipFontColor + ';">' + txt + '</SPAN></TD>
</TR></TABLE></TD></TR></TABLE>';
tooltip.write(tip);
tooltip.close();
tipcss.left = evt.pageX + offX;
tipcss.top = evt.pageY + offY;
} else if (ie4||ie5) {
tip = txt;
tooltip.innerHTML = tip;
tipcss.pixelLeft = evt.clientX + offX + document.body.scrollLeft;
tipcss.pixelTop = evt.clientY + offY + document.body.scrollTop;
} else if (ns5) {
tip = txt;
tooltip.innerHTML = tip;
tipcss.left = evt.pageX + offX;
tipcss.top = evt.pageY + offY;
}
tipcss.visibility='visible';
}

function hideTip() {
if (!tooltip) return;
tipcss.visibility = "hidden";
}
//-->
</SCRIPT>
</HEAD>

<!---Body--->


 <BODY>
<H1>The Simplest Tooltip</H1>
<P>Nothing fancy, like detecting edges, or moving with mouse movement. Just the basics, comprehensible for early dhtml study purposes.</P>
<UL>
<LI><A HREF="#" ONMOUSEOVER="doTooltip(event,'Your message here.')" ONMOUSEOUT="hideTip()">Link 1</A></LI>
<LI><A HREF="#" ONMOUSEOVER="doTooltip(event,msg1)" ONMOUSEOUT="hideTip()">Link 2</A></LI>
<LI><A HREF="#" ONMOUSEOVER="doTooltip(event,msg2)" ONMOUSEOUT="hideTip()">Image in tip</A></LI>
</UL>

<P>You can save this code or view it using the browser menu commands.</P>

<!-- place just before </body> -->
<DIV ID="tipDiv" STYLE="position:absolute; visibility:hidden; z-index:100"></DIV>

</BODY>
</HTML>


No Comments to show

Please completely fill out the form below if you want to review this snippet. All reviews are subject to validation.


Replying to a Comment...


Adding your comment. Please wait...

Thanks for adding your comment!. After further review it will be added.

There was a problem adding your comment. Please try again.

Please complete all the fields in the form before sending.

© 2002 - 2017 snippetlibrary.com All Rights Reserved. Conditions