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

【问题标题】：qtip2 - how to make a click inside a descendant tooltip to not close a parent tooltipqtip2 - 如何在后代工具提示中单击以不关闭父工具提示
【发布时间】：2017-11-22 19:26:23
【问题描述】：

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

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

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

我想实现：

在工具提示外部单击将关闭它们
在工具提示-B 内单击不会关闭工具提示-A（父工具提示）
在工具提示-A 内单击将关闭工具提示-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>';
            }
        }
    });
});

【问题讨论】：

标签： jquery tooltip qtip2

【解决方案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>';
            }
        }
    });
});

【讨论】：