jQueryUI tooltip Widget to show tooltip on Click

Question

How the new jQueryUI\'s tooltip widget can be modified to open the tooltip on click event on certain element\'s on document, while the others are still showing their tootip

Answer 1

This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a>

Sample: http://jsfiddle.net/A44EB/123/