How can I show all visible tooltips when using jQuery UI with tabs and accordion?

Question

I'm working on a web-application and I use jQuery UI with tabs and accordions and qTip2 (with tooltips).

I'm trying to create a "help" function that would toggle the display of all visible tooltips - and when the user change tab or accordion, then the tooltips should update based on which tooltips that should be visible.

I've created a simple js-fiddle example that illustrates the problem pretty well.

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);
                },
            },
        });
    });
}

Any help or pointers would be greatly appreciated :)

Edit: Updated the code and fiddle based on some experiments and Rakesh Singh's answer.

I'm still wondering how to not display the tooltips that should be hidden - all tooltips are displayed now, but they are updated to the correct places when the UI changes.

Answer 1

Just put

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

in jquery ready function.

i hope this will help.