Callbacks on jQuery Tipsy hide / show

Question

I'm trying to set a callback function after tipsy opens / closes.

function addText()
{
    $('#text').html('Tipsy is now open !');
}

$('.tipsy').tipsy(addText);

I want addText() to run after tipsy opens, but it doesn't.

Is there an easy way to do that without modifying tipsy core code ?

Here is my jsfiddle : http://jsfiddle.net/Tqcgr/1/

score 1 · Answer 1 · answered Nov 23 '12 at 12:44

1

So, let's look at the documentation: http://onehackoranother.com/projects/jquery/tipsy/

Tipsy doesn't support callbacks, but supports callback function for parameters: title, for instance. So, we could pass our function ass parameter. This function will do what we want it to and then simply return the original title, as if we haven't use this custom callback function

$(function () {
  function addText(el)
  {
    $('#text').html('Tipsy is now open !');
    return $(el).attr('original-title');
  }

  $('.tipsy').tipsy({
    gravity: 'w',
    title: function() {
      return addText(this);
    }
  });
});

Example can be seen here: http://jsfiddle.net/Rf8qY/

answered Nov 23 '12 at 12:44

Adam Kiss

11,811
9
48
81

Thanks a lot for your reply ! The thing is that by this way, attText is executed when tipsy is loaded... and not opened. I can handle that with a timeout, but Yury Tarabanko's solution seems better to me. – Hugo H Nov 23 '12 at 14:17
that's why the `addText()` is wrapped into anonymous function. But good luck anyway – Adam Kiss Nov 24 '12 at 22:01

score 1 · Accepted Answer · answered Nov 23 '12 at 12:58

It was easy to add onShow and onHide callbacks. Check this out: http://jsfiddle.net/Tqcgr/2/

BUT you need to modify show and hide methods.

//show
var callback = this.options.onShow,
    element = this.$element[0],
    runCallback = function() {
        if(callback){
            callback.call(element);   
        }
    };

//invoke
if (this.options.fade) {
    $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}, runCallback);
} else {
    $tip.css({visibility: 'visible', opacity: this.options.opacity});
    runCallback();
}

//hide
var callback = this.options.onHide,
    element = this.$element[0],
    runCallback = function() {
        if(callback){
            callback.call(element);
        }                        
    };
    //invoke
if (this.options.fade) {
    this.tip().stop().fadeOut(function() { $(this).remove(); runCallback()});
} else {
    this.tip().remove();
    runCallback();
}

I didn't want to modify tipsy's file, but this solution seems the better way to do that. Thanks a lot. Maybe this could be put as a pull request on the project's page ! :) — Hugo H, Nov 23 '12 at 14:27

Callbacks on jQuery Tipsy hide / show

2 Answers2