JavaScripts -> Informationen -> Advanced Animated Tooltip

<script type="text/javascript">
<!--
// = = ============================================================================== = =
// = = Advanced Animated Tooltip v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ============================================================================== = =

// --------------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// --------------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// --------------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// --------------------------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung
// =========

// 1. Fügen Sie ein Script mit dem Inhalt aatt_create(); irgendwo im Body-Tag ein
// 2. Ergänzen Sie ein Tag, welches den Tooltip erhalten soll, um
// onMouseOver="aatt('Text',breite,höhe)" onMouseOut="aatt_hide()"
// wobei Text der Text des Tooltips ist (<br> zum Zeilenumbruch), breite die Breite und höhe die Höhe
// z.B. <a href="http://www.htmlarsenal.de"
// onMouseOver="aatt('HTML Arsenal<br>Die Quelle f&uuml;r HTML,<br>JavaScript und PHP', 115,40)"
// onMouseOut="aatt_hide()">
// HTML Arsenal
// </a>

// Usage
// =====

// 1. Include a script with the content aatt_create(); anywhere in the body tag
// 2. Add the following text to the tag that should contain the tool tip:
// onMouseOver="aatt('Text',width,height)" onMouseOut="aatt_hide()"
// where Text is the text of the tool tip (<br> for line breaks), width is the width and height is the height.
// e.g. <a href="http://www.htmlarsenal.de"
// onMouseOver="aatt('HTML Arsenal<br>Your source for HTML,<br>JavaScript and PHP', 115,40)"
// onMouseOut="aatt_hide()">
// HTML Arsenal
// </a>

// Veränderbare Einstellungen / Adjustable settings
// ================================================

var bcol="#000000"; // Rahmen-Farbe / border color
var col="#000000"; // Schrift-Farbe / font color
var bgcol="#ffffc0"; // Hintergrund-Farbe / background color
var font="Verdana,sans-serif"; // Schriftart / font
var size="9px"; // Schriftgröße / font size
var align="left"; // Ausrichtung / alignment

// Script-Code

// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var mousex=0;
var mousey=0;
var to=0;
var progress=0;
var tw,th;

function aatt(para, width, height) {
  document.getElementById('aatt').innerHTML=para;
  document.getElementById('aatt').style.left=(mousex+12)+"px";
  document.getElementById('aatt').style.top=(mousey+20)+"px";
  document.getElementById('aatt').style.width=1+"px";
  document.getElementById('aatt').style.height=1+"px";

  document.getElementById('aatt').style.display="block";
  progress=1;
  tw=width-1;
  th=height-1;
  to=window.setTimeout("aatt_enlarge()",50);
}

function aatt_enlarge() {
  to=0;
  progress++;
  if(progress<26)document.getElementById('aatt').style.width=Math.floor(1+(progress*tw)/25)+"px";
  else document.getElementById('aatt').style.height=Math.floor(1+((progress-25)*th)/25)+"px";
  if(progress<50) to=window.setTimeout("aatt_enlarge()",50);
}

function aatt_hide() {
  progress=0;
  if(to)window.clearTimeout(to);
  document.getElementById('aatt').style.display="none";
}


function aatt_create() {
  document.writeln('<style type="text/css">');
  document.writeln('div.aatt { position:absolute; border:1px solid '+bcol+'; background-color:'+bgcol+'; color:'+col+'; font-family:'+font+'; font-size:'+size+'; display:none; padding:1px; text-align:'+align+'; overflow:hidden }');
  document.writeln('<\/style>');
  document.writeln('<div class="aatt" id="aatt">&nbsp;<\/div>');
}

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  if(progress) {
    document.getElementById('aatt').style.left=(mousex+12)+"px";
    document.getElementById('aatt').style.top=(mousey+20)+"px";
  }
}

document.onmousemove=capturemaus;

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Animated Tooltip --

// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 05.Mar.2004 --
// ----------------------------

//-->
</script>