Tooltip

Auteur: Koen - 22 februari 2009 - 14:57 - Gekeurd door: Koen - Hits: 5317 - Aantal punten: 4.30 (5 stemmen)

Een simpel maar handig tooltip scriptje!

Het voorbeeld wijst zichzelf uit

Veel plezier!

Code:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<style type="text/css">
html,body {
font-family: Verdana;
font-size: 11px;
color: black;
}
a:link,a:visited,a:active {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
</style>
<script type="text/javascript">
var tipShown;
var ie = document.all ? true : false;
var yPos;
var xPos;
var ySpacing = 15;
var xSpacing = 15;
document.onmousemove = locateMouse;
function locateMouse(e) {
	yPos = (ie == true) ? event.clientY + document.documentElement.scrollTop : e.pageY;
	xPos = (ie == true) ? event.clientX + document.documentElement.scrollLeft : e.pageX;
    if(tipShown == true) {
        document.getElementById('tooltip').style.top = yPos + ySpacing + "px";
        document.getElementById('tooltip').style.left = xPos + xSpacing + "px";
    }
}
function showTip(text) {
    tipShown = true;    
    document.getElementById('tooltip').style.display = "block";
    document.getElementById('innertooltip').innerHTML = text;
}
function hideTip() {
    tipShown = false;
    
    document.getElementById('tooltip').style.display = "none";    
}
</script>
</head>
<body>
<div id="tooltip" style="display: none; position: absolute; height: 15px; background-color: #ffffcc; border-style: solid; boder-color: black; border-width: 

1px;"><div id="innertooltip" style="margin-left: 2px; margin-right: 2px;"></div></div>
<a onmouseover="showTip('<b>Dit</b> is een voorbeeld van een tooltip!');" onmouseout="hideTip();" style="position: absolute;" href="#">Hoi</a>
</body>
</html>

<html>
<head>
<style type="text/css">
html,body {
font-family: Verdana;
font-size: 11px;
color: black;
}
a:link,a:visited,a:active {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
</style>
<script type="text/javascript">
var tipShown;
var ie = document.all ? true : false;
var yPos;
var xPos;
var ySpacing = 15;
var xSpacing = 15;
document.onmousemove = locateMouse;
function locateMouse(e) {
	yPos = (ie == true) ? event.clientY + document.documentElement.scrollTop : e.pageY;
	xPos = (ie == true) ? event.clientX + document.documentElement.scrollLeft : e.pageX;
    if(tipShown == true) {
        document.getElementById('tooltip').style.top = yPos + ySpacing + "px";
        document.getElementById('tooltip').style.left = xPos + xSpacing + "px";
    }
}
function showTip(text) {
    tipShown = true;    
    document.getElementById('tooltip').style.display = "block";
    document.getElementById('innertooltip').innerHTML = text;
}
function hideTip() {
    tipShown = false;
 
    document.getElementById('tooltip').style.display = "none";    
}
</script>
</head>
<body>
<div id="tooltip" style="display: none; position: absolute; height: 15px; background-color: #ffffcc; border-style: solid; boder-color: black; border-width: 
1px;"><div id="innertooltip" style="margin-left: 2px; margin-right: 2px;"></div></div>
<a onmouseover="showTip('<b>Dit</b> is een voorbeeld van een tooltip!');" onmouseout="hideTip();" style="position: absolute;" href="#">Hoi</a>
</body>
</html>

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (7)