qtip2

Question

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

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

在工具提示外单击将同时关闭它们
在工具提示中单击将关闭另一个工具提示

我想达到：

在工具提示外单击将同时关闭它们
在工具提示-B 内单击不会关闭工具提示-A（父工具提示）
在工具提示-A 内单击将关闭工具提示-B

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

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

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

jquery

tooltip