Question

Im doing an ajax call, that does the following on success:

success: function(data) {
var allok= data.success;
if(allok == true) {
   $("#share_text").addClass('share_success').delay(2000).queue(function(next){
      $(this).removeClass("share_success");
      next();
   });
} else {
   $("#share_text").addClass('share_fail').delay(2000).queue(function(next){
     $(this).removeClass("share_fail");
     next();
   });
}
   $('#share_message').html(data.message);
   $("#share_submit").val("Share");
   $("#share_submit").removeAttr("disabled")
}

Where allok = false (the else block) it should trigger the tipsy tooltip below this text box, while its doing addClass/removeClass.

<input name="whatever_name" id="share_text" type="text" value="Blah blah" size="40" title="This is a tooltip">

If I add $('#share_text').tipsy('show') into the else block, it works only when you mouseover the text box. How do I get it to show by itself?

Answer 1

cant you simply use the jquery trigger() function ?

$('#share_text').trigger('mouseenter'); // to show it
$('#share_text').trigger('mouseleave'); // to hide it

Don’t forget to first attach the tipsy() behaviour to #share_text before running the above code.

$('#share_text').tipsy();

In your code it should look like this:

$(function(){

// things to do on document.ready:
$('#share_text').tipsy();
// ... more stuff

// ... until your ajax callback
success: function(data) {
var allok= data.success;
if(allok == true) {
   $("#share_text").addClass('share_success').delay(2000).queue(function(next){
      $(this).removeClass("share_success");
      next();
   });
} else {
   $("#share_text").addClass('share_fail').delay(2000).queue(function(next){
     $(this).removeClass("share_fail");
     next();
   });
}
   $('#share_message').html(data.message);
   $("#share_submit").val("Share");
   $("#share_submit").removeAttr("disabled");
// simulate a mouseenter event on share_text, to launch tipsy().show
   $('#share_text').trigger('mouseenter');
}