Question

我正在开发一个Web应用程序，我使用带有标签和手风琴的jQuery UI和带有工具提示的qTip2。

我正试图创建一个＆＃34; help＆＃34;将切换所有可见工具提示的显示的功能 - 当用户更改制表符或手风琴时，工具提示应根据应该可见的工具提示进行更新。

我已经创建了一个简单的js-fiddle示例，可以很好地说明问题。

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的答案更新了代码和小提琴。

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

Answer 1

刚刚放

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

在jquery ready函数中。

我希望这会有所帮助。

Answer 2

我解决了剩下的问题，这是一个非常简单的解决方案，所以我在标记Rakesh＆＃39;作为被接受的答案，因为它帮助我解决了很多这个问题

过滤掉要显示或不显示的工具提示的解决方案是添加一个简单的if-sentence：

$('#tabs [data-qtip2Enabled]').each(function() {
    if ($(this).is(':visible')) {
        $(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);
                },
            },
        });
    }
});

并将此（使用hide（））绑定到$（＆＃34; DIV＃tabs li＆＃34;）和$（＆＃34; DIV＃tabs h3＆＃34;）的更改

在使用带有标签和手风琴的jQuery UI时，如何显示所有可见的工具提示？

2 个答案: