jquerytooltipqtip2

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


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>';
            }
        }
    });
});

Solution

  • 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>';
                }
            }
        });
    });