qtip2 - 如何在后代工具提示中单击以不关闭父工具提示

Question

我有一个工具提示-A，它通过ajax加载其内容。它包含一个用于打开另一个工具提示-B的链接。

何时打开两个工具提示关闭工具提示目前的工作方式如下：

1. 在工具提示外单击将关闭它们
2. 在工具提示内单击将关闭另一个

我想实现：

1. 在工具提示外单击将关闭它们
2. 点击工具提示-B内部不会关闭工具提示-A（父工具提示）
3. 点击工具提示内部-A将关闭工具提示-B

here

$(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

我明白了：

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