Tooltip erstellen mit jQuery und Css

Um ein Tooltip mit jQuery zu erstellen sind nur ganze 3 Schritte notwendig!

1. Css einbinden
2. HTML erstellen
3. JavaScript einfuegen

Notiz: jQuery muss natuerlich vorhanden sein!

1. Css einbinden

.tooltip{
    position:absolute;
    z-index:999;
    background-color:#dedede;
    padding:2px;
    border:1px solid #fff;
    display:none;
}

2. HTML erstellen

<div class="tu-navi" style="text-align: center;position: fixed;top: 50px;right: 0px;border: 1px solid #000;border-right-width: 0px;width: 30px;height: 152px;background-color: #FFF;">
    <div style="margin: 5px;">
        <a title="Startseite" href="index.php">
            <img style="border:0px;" src="images/icons/house_go.png" />
        </a>
    </div>
    <div style="margin: 5px;">
        <a title="Favorit" href="#">
            <img style="border:0px;" src="images/icons/heart_add.png" />
        </a>
    </div>
    <div style="margin: 5px;">
        <a title="Bewerten" href="#">
            <img style="border:0px;" src="images/icons/star.png" />
        </a>
    </div>
</div>

Hier ist zu beachten das im a tag ein title Attribut definiert ist.
Der Text der in diesem title Attribut steht wird spaeter im Tooltip stehen.

3. JavaScript einfuegen

$('.tu-navi a').each(function(i){
    $("body").append("<div class='tooltip' id='tooltip"+i+"'>" +
         "<p>"+$(this).attr('title')+"</p></div>");

    var my_tooltip = $("#tooltip"+i);

    var position = $(this).position();
    
    $(this).removeAttr("title").mouseover(function(){
            my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(400);
    }).mousemove(function(kmouse){
            my_tooltip.css({right: '40px', top:kmouse.pageY-15});
    }).mouseout(function(){
            my_tooltip.fadeOut(400);
    });
});

Die Position des Tooltips kann im JavaScript geaendert werden.
Im IE muss dieser Code im onload event ausgefuehrt werden da sonst ein Fehler geworfen wird.

Wollen Sie wirklich das Tutorial löschen?

Wollen Sie wirklich dieses Tutorial zulassen?

Wollen Sie wirklich dieses Tutorial zulassen?