jquery ui tooltip on click

This fddle shows how to use jQuery ui tooltips on click instead of mouseover.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="Some bla bla about field 1 ">?</button>
</p>
<p>
    <input id="input_box2" />
    <button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">?</button>
</p>
<p>
    <input id="input_box3" />
    <button id="trigger3" class="trigger" data-tooltip-id="3" title="bla bla 3">?</button>
</p>
<p>
    <input id="input_box4" />
    <button id="trigger4" class="trigger" data-tooltip-id="4" title="bla bla 4">?</button>

JavaScript

$(function () {
    //show
    $(document).on('click', '.trigger', function () {
        $(this).addClass("on");
        $(this).tooltip({
            items: '.trigger.on',
            position: {
                my: "left+30 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();
    });
});