javascript - 使用带有选项卡和 Accordion 的 jQuery UI 时，如何显示所有可见的工具提示？

Question

我正在开发一个网络应用程序，我使用带有选项卡和 Accordion 的 jQuery UI 以及 qTip2(带有工具提示)。

我正在尝试创建一个“帮助”功能来切换所有可见工具提示的显示 - 当用户更改选项卡或 Accordion 时，工具提示应根据应显示的工具提示进行更新。

我创建了一个简单的 js-fiddle 示例，它很好地说明了这个问题。

http://jsfiddle.net/Z3My2/8/

HTML:

<div id="mainDiv">
    <div id="mapContainer">
        <div id="simple_map" style="display: inline-block">
            <p title='MapTitle' data-qtip2Enabled>Place map here</p>
        </div>
    </div>
    <button type="button" id="ShowHelp">Show all help messages</button>
    <div id="tabs">
        <ul>
            <li><a href="#queryTab">Search</a>

            </li>
            <li><a href="#parametersTab">Search results</a>

            </li>
        </ul>
        <div id="queryTab">
            <div id='search'>
                <p>Options</p>
                <div id='queryOptions'>
                        <h3>
                        <span id='option1' title='This is option 1' data-qtip2Enabled>Option 1</span>
                    </h3>

                    <div id='option1Div'> <a title="another title" data-qtip2Enabled>Some text</a>

                    </div>
                        <h3>
                        <span id='option2' title='This is option 2' data-qtip2Enabled>Option 2</span>
                    </h3>

                    <div id='option2Div' title="Some Title" style="display: inline-block" data-qtip2Enabled>LaLaLaLALA</div>
                </div>
            </div>
        </div>
        <div id="parametersTab">
            <div id="parametersTabText">Text.
                <br>
                <p title='lorum ipsum' data-qtip2Enabled>More text with tooltip.</p>
            </div>
        </div>
    </div>
    <!-- this div is a pop, and don't actually appear -->
    <div id="errorMessageDialog" title="Warning" hidden>this is not a qtip-title (with tag data-qtip2Enabled)</div>
</div>

Javascript:

$(document).ready(function () {
    $("#tabs").tabs();
    $('#ShowHelp').click(toggleHelp);
    $("#queryOptions").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
    $('[data-qtip2Enabled]').qtip();
});
var helpEnabled = false;

function enableHelp() {
    unbindHelp();
    $("DIV#tabs li").on("click", function () {
        showHelp();
    });
    $("DIV#search span").on("click", function () {
        showHelp();
    });
    helpEnabled = true;
}

function unbindHelp() {
    $("DIV#tabs li").unbind("click");
    $("DIV#search span").unbind("click");
}

function toggleHelp() {
    if (!helpEnabled) showHelp();
    else {
        helpEnabled = false;
        unbindHelp();
        //$('[data-qtip2Enabled]').qtip('destroy');
        $(".qtip-content").hide();
        $('[data-qtip2Enabled]').qtip({
            show: 'mouseenter',
            hide: 'mouseleave',
        });
    }
}

function showHelp() {
    if (!helpEnabled) enableHelp();
    $(".qtip-content").hide();
    $('[data-qtip2Enabled]').each(function () {
        $(this).qtip({
            show: true,
            hide: false,
            events: {
                focus: function (event, api) {
                    api.set('position.adjust.y', -5);
                },
                blur: function (event, api) {
                    api.set('position.adjust.y', 0);
                },
            },
        });
    });
}

任何帮助或指点将不胜感激:)

编辑:根据一些实验和 Rakesh Singh 的回答更新了代码和 fiddle 。

我仍然想知道如何不显示应该隐藏的工具提示 - 现在显示所有工具提示，但当 UI 更改时它们会更新到正确的位置。

Answer 1

随便放

$("DIV#tabs li").on("click",function(){
    showHelp();
});

在 jquery 就绪函数中。

我希望这会有所帮助。