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 answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.

The Mouseout is cancelled in this example to make everything based on click events.

HTML

?




?

jQuery

$(document).ready(function(){ 
$(function () {
//show
$(document).on('click', '.trigger', function () {
    $(this).addClass("on");
    $(this).tooltip({
        items: '.trigger.on',
        position: {
            my: "left+15 center",
            at: "right center",
            collision: "flip"
        }
    });
    $(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
    $(this).tooltip('close');
    $(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
    e.stopImmediatePropagation();
});
})
})

http://jsfiddle.net/AK7pv/111/