jQuery UI Tooltip Plugin

May 15th, 2009 by dave Posted in Development, VPR Tags: CSS, JQuery

UPDATE: There is now a dedicated page: jQuery vTip.

We’ve looked around for a nice jQuery tooltip plugin and failed to find one that suited us, and we specifically wanted jQuery UI integration so the styling is done using whatever theme you are rolling.

To use it attach a class of vtip to any element, and give it a title. For example, <a href=”test.html” class=”vtip” title=”This is the tooltip!”>Link</a>.

Here’s the code, feel free to use it and drop us a backlink if you care:

/**
Vertigo Tip by www.vertigo-project.com
Requires (kind of) jQuery UI, and (definately) jQuery
*/

this.vtip = function() {
    xOffset = 5; // x distance from mouse
    yOffset = 20; // y distance from mouse       

    $(".vtip").hover(

        function(e) {
            this.t = this.title;
            this.title = ''; //stop the actual title showing

            $('body').append( '

' + this.t + '

' );
            $('p#vtip').css("display", "none") //hide it
                       .css("position", "absolute").css("opacity", "0.9").css("padding", "10px") //style
                       .css("top", (e.pageY + yOffset) + "px").css("left", (e.pageX + xOffset) + "px") //position
                       .fadeIn("fast"); //show it
        },
        function() {
            this.title = this.t; // set the title back

            $("p#vtip").remove();
        }

    ).mousemove(

        function(e) {
            $("p#vtip").css("top",(e.pageY - xOffset) + "px")
                       .css("left",(e.pageX + yOffset) + "px");
        }

    );            

};

jQuery(document).ready(function($) {
    vtip();
})