$(document).ready(function() {
    var jqueryTooltip = $('<div id="jqueryTooltip"></div>');
    $('body').append(jqueryTooltip);
     $('!*[title^=""]').hover(function(e) {
        /* Das aktuelle Element wird in einer Variable gespeichert. Dies hat vor allem performance gründe*/
        var ae = $(this);
        /* Der Text des Title-Tags wird ebenfalls in eine Variable gespeichert (Siehe Anmerkung 1.0) */
        var title = ae.attr('title');
        /*damit wir bei einem Mouseover nur unseren "tollen Title-Tag" bekommen leeren wir den aktuellen Title-Tag */
        ae.attr('title', '');
        /* Als nächstes speichern wir unseren aktuellen Text um später (bei einem Mouseout) denn Text des Title-Tags wieder einfügen zu können */
        ae.data('titleText', title);
        /* Jetzt fügen wir den Text des Title-Tags in unseren neuen "tollen Title-Tag" ein */
        jqueryTooltip.html(title);
        /* damit der tooltip an der richtigen stelle angezeigt wird brauchen wir auch noch einige CSS Angaben. Mit e.pageX und e.pageY greifen wir auf die X und Y Koordinaten des Mauszeigers zu. Natürlich wird auch das wieder in Variablen gespeichert. Natürlich brauch dieser auch Abstände zur Maus sonst sieht es komisch aus */
        var _t = e.pageY + 30;
        var _l = e.pageX - 5;
        /* diese angaben fügen wir nun auch noch unserem neuen "tollen Title-Tag" hinzu mit dem Befehl "css" (Siehe hierzu Anmerkung 1.1) */
        jqueryTooltip.css({ 'top':_t, 'left':_l }); 
        /* Nun sind wir fast fertig. Zuletzt müssen wir den neuen "tollen Title-Tag" nur noch anzeigen lassen (Siehe Anmerkung 1.2) */
        jqueryTooltip.show(0);
    }, function() {
        /* zuerst speichern wir wieder die variable ab */
        var ae = $(this); 
        /* dann lassen wir den neuen "tollen Title-Tag" wieder verschwinden (Siehe auch Anmerkung 2.0) */
        jqueryTooltip.hide(0);
        /* jetzt brauchen wir natürlich den text auch wieder der eigentlich im Title-Tag steht. Da wir diesen vorhin gespeichert haben, können wir ihn einfach auslesen lassen */
        var title = ae.data('titleText');
        /* wir fügen wieder den Text des Title-Tags ein */
        ae.attr('title', title);
    }).mousemove(function(e) {
        /* wir lassen uns erneut die aktuelle Mausposition ausgeben mit abständen zum mauszeiger */
        var _t = e.pageY + 30;
        var _l = e.pageX - 5;
        /* und wieder fügen wir das ganze dem Tooltip hinzu */ 
        jqueryTooltip.css({ 'top':_t, 'left':_l });
    });
});