Joomla tooltip and ajax

[aaron harding]

If have a search component which contains a form with 3 selection boxes. The entire form is ajax, so when you select an option from 1 of the selection boxes it does a quick search to see if there will be any results, if there are no results that option from the other selection boxes will be filtered out. The ajax is triggered on an onChange event.

On one of my selection boxes i have tooltip attached to the option giving a small description. When the component is first loaded the tooltip works fine. But when an option is selected and the form is reloaded by the ajax the tooltip does not work.

I did a small test to see if the tooltip javascript is still there by adding a tester selection box outside of the div which gets updated from the ajax. the selection box outside of the div worked but the rest did not. Is there a problem with the tooltip on ajax forms?

[aaron harding]

Another thing i noticed which may help, if i go to the requested ajax page directly the tool tips still work. Could it lose the tooltip when i request the page raw?

[aaron harding]

Solved this problem, when requesting the form in a raw format it seems to stop working. I resolved this by adding the event again straight after the ajax responsive text. example:

Code: Select all

function stateChanged(){

if (xmlhttp.readyState == 4)  {
document.getElementById("mod_coursecontainer").innerHTML=xmlhttp.responseText;
var JTooltips = new Tips($$('.hasTip2'), { showDelay: 500, hideDelay: 0, className: 'custom2', fixed: true, offsets: {'x':16, 'y':16}, 
      onShow: function(tip) {tip.effect('opacity', {duration: 100, wait: false}).start(0,1)}, 
      onHide: function(tip) {tip.effect('opacity', {duration: 0, wait: false}).start(1,0)}
   }); 

 }

}

[djaris45]

Updated for 1.7:

Code: Select all

 $$('.hasTip').each(function(el) {
 var title = el.get('title');
 if (title) {
 var parts = title.split('::', 2);
 el.store('tip:title', parts[0]);
 el.store('tip:text', parts[1]);
 }
 });
 var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});