Sliding jQuery Tool-Tips

A subtle tool-tip

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<p><a href="#" class="tooltip" id="item7">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, <a href="#" class="tooltip" id="item6">odio eros</a> pellentesque sapien, at consectetur mi nibh at massa.</p>

<ul>
   <li><a href="#" class="tooltip" id="item1">Lorem Ipsum 1</a></li>
   <li><a href="#" class="tooltip" id="item2">Lorem Ipsum 2</a></li>
   <li><a href="#" class="tooltip" id="item3">Lorem Ipsum 3</a></li>
   <li><a href="#" class="tooltip" id="item4">Lorem Ipsum 4</a></li>
   <li><a href="#" class="tooltip" id="item5">Lorem Ipsum 5</a></li>
   <li><a href="#" class="tooltip" id="item6">Lorem Ipsum 6</a></li>
</ul>

<!-- The Tool-Tip -->
<div class="tip tooltip">
 <div class="center"></div>
</div>

CSS

/* Just some simple styles for the demo */
body {
    margin: 60px 20px;
    background-color: #eee;
    font-family: 'Yanone Kaffeesatz';
}

p { margin:20px 0 30px 0; }
a { color: #4b6f7e; text-decoration: none; }

ul { list-style-type: none; font-size: 16px; }
li { float: left; margin-right: 20px; }
li a { color: #4b6f7e; text-decoration: none; }

/* Tool-Tip Specific CSS */
.tip {
 position: absolute;
 left: -300px;
 z-index: 1;
}

.tip .center {
 float: left;
 display: block;
 height: 16px;
 padding: 6px 8px;
 background-color: #222;
 color: #fff;
 font-size: 16px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

.tip .center:after {
 content: "";
 position: absolute;
 top: 100%;
 left: 10px;
 border-top: 8px solid #222;
 border-top-color: #222;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
}

JavaScript

function Tooltip(elementClass, tipMessages) {
    var obj = this;
    this.m_class = elementClass;
    this.m_messages = tipMessages;
    this.m_tipDiv = $(".tip."+elementClass);

    this.show = function () {
        // Get the Tool-Tip text from the associative array
        var message = obj.m_messages[$(this).attr("id")];
        if (!message) message = "Tip undefined for "+$(this).attr("id");
     
        // Slide in the tooltip
        obj.m_tipDiv.show().css("top",$(this).offset().top - 40)
            .stop(true,false).animate({left: $(this).offset().left + ($(this).width() / 2) - 16})
            .find('.center').html(message);
    }
     
    this.hide = function () {
        // Make the tooltip slide out
        obj.m_tipDiv.stop(true,false).animate({left: -300});
    }

    $("." + this.m_class).mouseover(this.show).mouseout(this.hide);
    this.m_tipDiv.css("display","none");
}

// Add your Tool-Tips here. Format: item#: "Tool-Tip Text", then add the item# as the id to any href.
$(document).ready(function () {
    var tips = { item1: "Tool-Tips Slide in",
                 item2: "You can add as many as you like",
                 item3: "The Tool-Tip text is defined...",
                 item4: "in the $(document).ready(function ())",
                 item5: "Nice Tool-Tip!",
                 item6: "You can also re-use a Tool-Tip",
                 item7: "You can add Tool-Tips anywhere easily.",                   
    };
    new Tooltip('tooltip',tips);
});