Tooltip
Die Hilfe wo sie gebraucht wird
Zur Userfreundlichkeit gehören klare Angaben an fraglicher Ort und Stelle; weiss einer nicht wie etwas geht, ist er schnell weg.
Zeig mir das Biest.
(mit etwas Verzögerung, weil es nicht vorgeladen ist.)
Der Tool Tip Container in HTML
<div id="block"></div> Steht irgendwo und ist leer.
Das CSS
<style type="text/css">
#block {
background-color: #FFE090;
width: auto;
height: auto;
border: 1px solid #FFC090;
color: #FF0010;
top: 220px;
left: 220px;
position: absolute;
z-index: 1;
display: none;
padding: 2px;
}
</style>
Das Javascript
Browserweiche prüft auf document.all
IE und FF verstehen die (Zeiger-) Position anders. IE nutzt 'event.x' FF hingegen 'pageX'
<script type="text/javascript">
/* gefunden bei http://xdee.net/2009/05/11/tooltips-in-javascript-tutorial/ */
// für IE
function showit() {
if(drag) {
window.setTimeout('showitMOZ(e)',10);
document.getElementById('block').style.display='block';
document.getElementById('block').innerHTML = distext;
document.getElementById('block').style.left = event.x + 5 + "px";
document.getElementById('block').style.top = event.y + 5 + "px";
}
}
// für FF
function showitMOZ(e) {
if(drag) {
document.getElementById('block').style.display='block';
document.getElementById('block').innerHTML = distext;
document.getElementById('block').style.left = e.pageX + 5 + "px";
document.getElementById('block').style.top = e.pageY + 5 + "px";
}
}
// Aufruf via Link oder Bild
function tagTip(text) {
distext = text; // Text übernehmen
drag = true; // Tip folgt dem Mauszeiger bei true
if (!document.all) { // nicht für IE
window.onmousemove=showitMOZ;
} else {
document.onmousemove=showit;
}
}
// macht Tip wieder unsichtbar
function unTip() {
document.getElementById('block').style.display='none';
drag = false;
}
</script>
Die Links und Bilder
<!-- Der Container, einer für alle -->
<div id="block">
</div>
<p>
<a href="#" onmouseover="tagTip('Ich bin ein Tool Tip')" onmouseout="unTip()">Zeig mir den Tool Tip.</a>
</p>
<p>
<img src="images/info_icon_blue.gif" alt="Tip" height="22px" width="22px" align="bottom" border="0"
href="#" onmouseover="tagTip('Auch Bilder können Tool Tip.')" onmouseout="unTip()" />
</p>
<p>
<a onmouseover="tagTip('<img src=\'images/krokodil.jpg\'/>')" onmouseout="unTip()" href="#">Zeig mir das Biest.</a>
<br />(mit etwas Verzögerung, weil es nicht vorgeladen ist.)
</p>
Mehr
Das ultimative TT gibts bei http://www.walterzorn.de/tooltip/tooltip.htm
Ein ganz einfacher CSS Tip über Links gibt es auch: Links Tip (Vorteil: ohne Javascript)
Diese Seite validiert nicht w3c konform
Check den Code.