0

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?

pixeline
  • 17,669
  • 12
  • 84
  • 109

1 Answers1

0

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');
}
pixeline
  • 17,669
  • 12
  • 84
  • 109
  • It already does this by default. I need to show it without user's interaction. When the ajax response is false for allok variable, the tooltip should show, which will display the error message of what the user did wrong –  Jun 06 '11 at 22:11
  • trigger('mouseenter') will launch the tipsy.show() method. It will simulates a "mouseenter" event, which is basically what hover is. – pixeline Jun 06 '11 at 22:16
  • i've included my code into yours. Hopefully you'll get the point. – pixeline Jun 06 '11 at 22:20
  • post a sample of what you got so far on jsbin.com and publish back the link to your prototype here, so that i can get a better insight at what you are trying to do. – pixeline Jun 06 '11 at 22:52