qtip2 - how to make a click inside a descendant tooltip to not close a parent tooltip

Question

I have a tooltip-A which loads its content via ajax. It contains a link to open another tooltip-B.

When are both tooltips opened closing of the tooltips currently works like this:

1. Click outside the tooltips will close both of them
2. Click inside a tooltip will close the other one

I want to achieve:

1. Click outside the tooltips will close both of them
2. Click inside the tooltip-B will NOT close tooltip-A (the parent tooltip)
3. Click inside the tooltip-A will close tooltip-B

http://jsfiddle.net/GAmFK/121/

$(document).on('click', '.tooltip-a', function(event) {
    $(this).qtip({
        show: {
            event: event.type, 
            ready: true
        },
        hide: 'unfocus',
        content: {
            text: function(event, api) {
                // Ajax content simplified for this example
                return '<h1>tooltip-A</h1> <a href="#" class="tooltip-b">open tooltip-B</a>';
            }
        }
    });
});

$(document).on('click', '.tooltip-b', function(event) {
    $(this).qtip({
        show: {
            event: event.type, 
            ready: true
        },
        hide: 'unfocus',
        content: {
            text: function(event, api) {
                return '<h1>tooltip-B</h1> <span>Click inside this tooltip should NOT close tooltip-A</span>';
            }
        }
    });
});

Answer 1

I figured it out:

$(document).on('click', '.tooltip-a', function(event) {
    $(this).qtip({
        show: {
            event: event.type, 
            ready: true
        },
        hide: 'unfocus',
        events: {
            hide: function(event, api) {
                if ($(this).nextAll('.qtip').has(event.originalEvent.target).length)
                {
                    event.preventDefault();
                }
            }
        }
        content: {
            text: function(event, api) {
                // Ajax content simplified for this example
                return '<h1>tooltip-A</h1> <a href="#" class="tooltip-b">open tooltip-B</a>';
            }
        }
    });
});