JQuery Tabs + Tooltip

JQuery Tabs + Tooltip

I want to have tooltips in my ajax loaded tabs. This is my code:

  1. $( '#tabs-1' ).tabs({ beforeLoad: function( event, ui ) {ui.panel.html('<div style="text-align: center; vertical-align: middle;"><img src="images/loading.gif" />'); ui.jqXHR.fail(function() { ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible." ); }); } }).on( "tabsload", function( event, ui ) {$('.tooltip').jBox('Tooltip', { closeOnMouseleave: true, ajax: { url: 'tooltips/tooltip-html.jsp', reload: true, getData: 'data-ajax', setContent: true, spinner: true } });} ) $( '#tabs-2' ).tabs({ beforeLoad: function( event, ui ) {ui.panel.html('<div style="text-align: center; vertical-align: middle;"><img src="images/loading.gif" />'); ui.jqXHR.fail(function() { ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible." ); }); } }).on( "tabsload", function( event, ui ) {$('.tooltip').jBox('Tooltip', { closeOnMouseleave: true, ajax: { url: 'tooltips/tooltip-html.jsp', reload: true, getData: 'data-ajax', setContent: true, spinner: true } });} ) <div id="tabs-1"> <ul> <li> <a href="all.html">All Austria</a> </li> <li> <a href="austria-a.html">Austria A</a> </li> <li> <a href="austria-b.html">Austria B</a> </li> <li> <a href="austria-c.html">Austria C</a> </li> <li> <a href="austria-d.html">Austria D</a> </li> </ul> </div> <div id="tabs-2"> <ul> <li> <a href="all.html">All Germany</a> </li> <li> <a href="germany-a.html">Germany A</a> </li> <li> <a href="germany-b.html">Germany B</a> </li> <li> <a href="germany-c.html">Germany C</a> </li> <li> <a href="germany-d.html">Germany D</a> </li> </ul> </div>


Files all.html, austria-a.html etc contain these links:

  1. <a class="tooltip" data-ajax="xx" href="xxx">xx</a>

It all works, but when I click on Germany A tab, then Germany B tab, then Germany C tab then I move my mouse to tooltip link in Austria tab, the tooltip is displayed three times (because I made three Germany tabsloads, tabsload affect all tabs, I want to effect only the one I click).

Does anyone know how to fix the code? Thank you very much