Add a Tooltip using CSS and jQuery with Gradient and Round Borders

The perfect cross-browser tooltip is hard to find. You can always use the default, but it may not match your theme. Based on information I found in this article, I wrote a very nice tooltip using CSS and jQuery.

Your page requires jQuery (WordPress already has it) and the function must load after the page (you can shortcut this requirement and put the code at the bottom of the page, but I wouldn’t recommend this).

HTML:

<a href=”http://www.developerscloset.com” class=”theTooltip”>Developers Closet</a><span>Add a nice tooltip here.</span>

Here is the jQuery code:

// add theTooltip to the page
$('.theTooltip').hover(function () {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTheTooltip');
    $(this).next('span').css('left', offset.left + 'px');
    }, function () {
        $(this).next('span').fadeOut(200);
});

And here is the CSS:

.theTooltip + span {
    display:none;
}
.showTheTooltip {
    color: #494D54;
    font-size: 11px;
    font-weight: lighter;
    background: #CCCCCC; /* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F4F4F4)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFFFFF,  #F4F4F4); /* for firefox 3.6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F4F4F4'); /* for IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#F4F4F4')"; /* IE8,IE9 */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); /* IE10 */
    padding:5px;
    margin-top: 11px;
    margin-left: 23px;
    position: absolute;
    border: 1px solid #808080;
    max-width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}