qTip² - Tooltip keep opened when clicked doesn't work

Question

I have the following code:

Giving all my trigger-elements the qTip-widget:

$('.trigger_element').each(function() {

            $(this).qtip({

                content:  $(this).find('.trigger_element_content').html(),
                hide:     {
                    fixed: true,                // Keep open when mouse is over tooltip.
                    delay: 150,                 // Close after 150ms. Necessary for keeping open when moving mouse from trigger element to tooltip.
                    effect: function() {
                        $(this).fadeOut(200)
                    }
                },

                show: {
                    effect: function() {
                        $(this).fadeIn(200);
                    }
                },

                position: {
                    viewport: true,         // Only showing tooltip in a visible area.
                    my: 'top center',       // Setting anchor of tooltip.
                    at: 'bottom center',    // Placing the tooltip to trigger element.
                    collision: 'flip'       // Flipping tooltip to opposite site when it doesn't fit.
                }

            });

        });

Now I want the tooltip to stay opened when i click on my trigger-element:

$('.trigger_element').click(function() {

            $(this).qtip('option', {

                hide: {

                    event: false,

                    // Although our target "$(this)" is known, qTip2 got a bug here.
                    // If we omit the target option, qTip2 will throw an error
                    // wich says that our target is undefined.
                    target: $(this)

                }

            });

        });

Now the problem is, that my tooltips don't stay opened after i clicked on my element. They disappear after i unfocus my trigger-element.

How should my code behave: When I hover over one of my trigger-elements, the tooltip should open. When I leave with my mouse, the tooltip should hide.

BUT when I click on my trigger-element, the tooltip should stay opened even if i leave with my mouse.

Answer 1

Could you not do this by using the event property of qtip and setting the api? see modified answer.

As Rotan075 mentioned, the magic happens using the API of qTip. You can assign the widget to each element and also bind the click event handler.

For example:

$([selector]).qtip();

$([selector]).click(function() {
  var api = $(this).qtip('api');
  api.set('hide.event', false);
});

This way you can handle every qTip so it would appear on mouseenter. If you use a delay u need to set the show.event option to both, mouseenter and click or use the seperate event handler to immediatly show the qTip

Edit (Updated)

Also a jsfiddle to try it out: http://jsfiddle.net/wHpvW/834/

Edit2

Noticed a minor problem with the default mouseleave behavior of the tooltip. If you set the hide.event to false, everytime the tooltip will be opened, it will stay open. So i have updated the jsfiddle to cover that.

The solution is to use the show event of qTip to reset the hide.event to mouseleave (default).

$([selector]).qTip({
    events: {
        show: function() {
            $([selector]).qtip('api').set('hide.event', 'mouseleave');
        )
    }
});