jQuery UI Tooltip Plugin

May 15th, 2009 by dave. 8 Comments »

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();
})
Reblog this post [with Zemanta]

Almost April Update

March 27th, 2009 by dave. No Comments »

Long time no speak! We’ve been busy working on Vertigo Rentals – a product we’ll soon be releasing which allows you to run and manage a rental system for apartments!

We hope it have it available some time next month, so stay tuned as the first 50 sales will be getting a discount!


Snapt