jQuery Tooltip

by Pedro Pinto

HTML

<div id="tooltip_wrapper">
    <div id="tooltip_text"></div>
    <div id="tooltip_arrow"></div>
</div>
<div id="content">
    <h1 title="Awesome!">Husaberg FS 570</h1>
    <p><img src="http://1.bp.blogspot.com/-WbzDtnzvtmU/TZLlWXYD9NI/AAAAAAAAGV0/1hMQLjFCotw/s1600/2011%2BHusaberg%2BFS570%2BPictures4.jpg" title="Supermoto FTW!" alt="Husaberg FS 570" />
        The legendary weapon for the asphalt tracks of this world turns riders into curve-hungry, acceleration addicts, while being <span title="So true!">so perfect to handle</span> that the huge power potential remains absolutely controllable at all times. Equipped with first-class racing components, victory on the local or supermoto track is a certainty.</p>
    <h2>Hover your mouse over the title, image or bold text.</h2>
</div>

CSS

#tooltip_wrapper {
    display: none;
    position: absolute;
    z-index: 9999;
}
#tooltip_arrow {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAARElEQVQIHWNkYGDYDMR4AdP///8b8KkAyTMBFZzFpRAqfpYByIBhY6AGkNVgDBQ3hsnBFMBosEJkBSCFMElkGm4CzCQAXjlYzcDHHA0AAAAASUVORK5CYII=) no-repeat;
    background-position: center center;
    width: 9px;
    height: 5px;
    margin: 0 auto;
    margin-top: -1px;
}
#tooltip_text {
    background: rgba(0,0,0,0.9);
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255, 0.3);
    box-shadow: 0px 0px 5px rgba(0,0,0,.50);
    line-height: 1.4em;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    color: white;
}


body {
    background: #CCC;
}
* {
    font-family: sans-serif;
}
#content {
    padding: 40px;
    width: 500px;
}
h1 {
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    display: inline;
}
p {
    font-size: 1em;
    line-height: 1.5em;
    color: #333;
}
img {
    width: 200px;
    float: left;
    padding-right: 20px;
}
p span {
    font-weight: bold;
}
h2 {
    opacity: 0.3;
    font-size: 0.8em;
    margin-top: 80px;
}

JavaScript

$(function() {
    var title = "";
    tooltip = $("#tooltip_wrapper");

    $("*[title]").hover(function(e) {

        el = $(this);

        title = $(el).attr("title");
        $(el).removeAttr("title");

        tooltipTimer = setTimeout(function() {

            $(tooltip).find("#tooltip_text").text(title);

            var xPos = ($(el).offset().left + $(el).width() / 2) - ($(tooltip).width() / 2);
            yPos = $(el).offset().top - $(tooltip).height() + parseInt($(el).css("padding-top"));

            $(tooltip).css({
                left: xPos,
                top: yPos,
                display: "block",
                opacity: 0
            }).animate({
                top: yPos - 5,
                opacity: 1
            }, 200);
        }, 500);
    }, function() {

        $(el).attr("title", title);
        clearTimeout(tooltipTimer);

        $(tooltip).animate({
            top: yPos - 25,
            opacity: 0
        }, 200, function() {

            if ($(tooltip).is(":animated")) {
                $(tooltip).css({
                    left: -1000,
                    top: -1000,
                    display: "none",
                    opacity: 0
                });
                $(tooltip).find("#tooltip_text").text("");
            }
        });
    });

    $(tooltip).hover(function() {
        $(tooltip).hide();
    });
});