...

View Full Version : simple tooltip



Al_90
11-12-2006, 01:24 AM
Hi,

Im learning javascript a bit from the net and am wondering if someone would be kind enough to help me with a problem. i need a tooltip type script, that is very short and to the point. probably like one or two functions to show and one to remove. no fancy things at all.

Thanks.

ess
11-12-2006, 02:47 AM
Hi Al_90.

This might sounds a bit like a joke...but the easiest way to create a tooltip is to create a link and define a title for that link....

<a href="/homepage.html" title="Please click here to go to the home page.">Home</a>

Basically...when you specify a title for a given link...a tooltip would automatically be displayed once you mouse hover over the link.

Now...that is the simplest way to create a ToolTip....without needing to use JavaScript.

If you want to use JavaScript..here is an example of a ToolTip Script that I have written over 3 years ago. first...the css..

<style type = "text/css">
#tips {
display: none;
position: absolute;
border: 1px solid black;
background-color: lightyellow;
width: 200px;
}
</style>

Than the JS script itself.

<script type = "text/javascript">
function showTip( tip, e ) {
var x = 0;
var y = 0;
if ( document.all ) {
x = event.clientX;
y = event.clientY;

} else {
x = e.pageX;
y = e.pageY;
}
var element = document.getElementById( 'tips' );
element.style.display = "block";
element.style.left = x + 12;
element.style.top = y + 10;
element.innerHTML = tip;
}
function hideTip() {
document.getElementById( 'tips' ).style.display = "none";
}


Here is a link example...

<a href = "http://google.com" onMouseover = "showTip( 'If you click here...you would be taken to google.com', event );" onmouseout="javascript: hideTip();">google.com</a>

This script is very old...but does the trick that you are after. I have re-written the above script more than 5 times...(sorry...I am now working for a company...and whatever I write...is legally owned by them...so you are seeing the old school stuff here).

I would really appreciate it if you would kindly contact me and let me know what improvements you have added to the script.

thanks and good luck.
ess

Al_90
11-12-2006, 03:54 AM
haha ok,

heres your script im using right now



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<html>



<head>

<title>test</title>

<style type="text/css">

<!--

body {

background-color: #CACACA;

}



#tips {

display: none;

position: absolute;

border: 1px solid black;

background-color: lightyellow;

width: 200px;

}

-->

</style>



<script type="text/javascript">

<!--

function showTip( tip, e ) {

var x = 0;

var y = 0;

if ( document.all ) {

x = event.clientX;

y = event.clientY;



} else {

x = e.pageX;

y = e.pageY;

}

var element = document.getElementById( 'tips' );

element.style.display = "block";

element.style.left = x + 12;

element.style.top = y + 10;

element.innerHTML = tip;

}



function hideTip() {

document.getElementById( 'tips' ).style.display = "none";

}

// -->

</script>

</head>



<body>

<a href="http://google.com" onMouseover="showTip('If you click here...you would be taken to google.com', event );" onmouseout="hideTip();">google.com</a>

</body>

</html>


but theres an error somewhere. and me not knowing javascript that will isn't helping. also will this tooltip turn out a bit like overlib? thanks so much for everything so far

Al_90
11-12-2006, 04:07 PM
sorry for the double post, but iv found a script that does basicly everything i want but it can't free move over the test like on overlib. it stays in one spot. any help. also is there an way to clean it up a bit it kinda looks like theres unneeded variables. thaks



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
<!--

var last_layer = 0;
var x, y;
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
var ua= navigator.userAgent;
var MAC= (navigator.platform.indexOf("PPC") > 0);
var IE5, MAC_IE5, MAC_SAFARI, SAFARI;

IE5 = (ua.indexOf("MSIE 5") > 0 || ua.indexOf("MSIE 6") > 0);
MAC_IE5 = (MAC && IE5);
SAFARI = (ua.indexOf("Safari") > 0);
MAC_SAFARI = (MAC && SAFARI);

function GetObject(name)
{
if (document.getElementById)
{
return document.getElementById(name);
} else
if (document.all)
{
return document.all[name];
} else
if (document.layers)
{
return document.layers[name];
}
}

function GetOurMouse(e)
{
x = e.pageX;
y = e.pageY;
}

function ShowDetails(user_name, score, filesize, rating, which)
{
if(!MAC_IE5)
{
var our_style = GetObject(which);
our_style.style.display = "block";

if(last_layer != 0)
{
RemoveDetails(last_layer);
last_layer = 0;
}

last_layer = which;

if(ie4)
{
eval("document.all." + which + ".style.left = " + (event.x-60+document.body.scrollLeft) + ";");
eval("document.all." + which + ".style.top = " + (event.y+20+document.body.scrollTop) + ";");
} else
if(ns4||ns6||MAC_SAFARI)
{
document.onmousemove = GetOurMouse;
our_style.style.left = (x-60);
our_style.style.top = (y+20);
}

var content = '<table border="0" cellpadding="0" cellspacing="0" width="150"><tr><td bgcolor="#000000" width="100%" align="center"><table border="0" cellpadding="1" cellspacing="2" width="100%"><tr><td align="center"><font color="#C2C7CB">by</font> <font color="#FF9900"><b>' + user_name + '</b></font></td></tr><tr><td align="center"><font color="#C2C7CB">Current Score:</font> <b><font color="#FFCC00">' + score + '</font></b><br><font color="#C2C7CB">Size:</font> <b><font color="#FFCC00">' + filesize + '</font></b><br><font color="#C2C7CB">Rating:</font> <font color="#D94935"><b>' + rating + '</b></font></td></tr></table></td></tr></table>';

if(ns4){our_style.document.write(content);our_style.document.close();our_style.visibility="visible"}
if(ns6){document.getElementById(which).innerHTML= content; our_style.display=''}
if(ie4){document.all(which).innerHTML=content;}
}
}

function RemoveDetails(which)
{
var our_style = GetObject(which);

if(ns4){document.which.visibility="hidden";}
else if (ns6||ie4)
our_style.style.display="none";
last_layer = 0;
}

//-->
</SCRIPT>
</head>
<body>
<a href="#" onMouseover="ShowDetails('test', '3/10', '5kb', 'PG', '1');" onMouseout="RemoveDetails('1');">text</a>
</body>

</html>

ess
11-12-2006, 08:06 PM
Right...this is the first time I hear of overlib...had a look...looks well written and well formed. Perhaps you should consider using it.

As for the reason the script I gave didn't work...well, I forgot to mention that you should include a div in your page...and give "tips" id.

<div id="tips">&nbsp;</div>

that should get it working nicely.

Good luck
ess



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum