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

i'm working on web-application , use jquery ui tabs , accordions , qtip2 (with tooltips).

i'm trying create "help" function toggle display of visible tooltips - , when user change tab or accordion, tooltips should update based on tooltips should visible.

i've created simple js-fiddle example illustrates 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 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 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 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 tooltip.</p>             </div>         </div>     </div>     <!-- div pop, , don't appear -->     <div id="errormessagedialog" title="warning" hidden>this not 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 or pointers appreciated :)

edit: updated code , fiddle based on experiments , rakesh singh's answer.

i'm still wondering how not display tooltips should hidden - tooltips displayed now, updated correct places when ui changes.

just put

$("div#tabs li").on("click",function(){     showhelp(); }); 

in jquery ready function.

i hope help.