jQuery qTip - Trigger before create

Question

i try to trigger someFunction() before the qtip is created

$('.selector').qtip({
   content: {
      text: someFunction(this.id) }
});

This code works but i think this is a dirty solution. Is there maybe a start: event like in the most jquery plugins (for example draggable)? I found nothing about this it in the documentation.

EDIT: Ok, this code wont work. He trigger the function on pageload and not onhover.

UPDATE:

function someFunction(someId)
{
    // some code ...
    var searchResult = ' ... some results from the search -> from '+someId+' ... ';
    return searchResult;

}

Chant

Answer 1

Use the Callback option beforeShow : , it's a better way to do this.

Reference here.

Remove brackets from someFunction as well.

$('.selector').qtip({
    api : {
        beforeShow : function (someId)
        {
            // some code ...
            var searchResult = ' ... some results from the search -> from '+someId+' ... ';
            // place text in tooltip
        }
    }
});

Working Sample.

Tropaeolin

He wants to replace the text each onhover event, someFunction should replace it directly. content: { text: only write it once on page load – Tropaeolin

jsbin.com/olafop/edit#preview Can you test your code in this example please? – Chant

I "think" your solution is faster. – Chant

Using the provided qTip API for callbacks is faster, indeed. Thanks for considering it :) – Tropaeolin

Answer 2

You need to pass someFunction, not someFunction(). The latter calls the function and assigns the return value to text and then never calls the function again. By passing the function itself qTip will see the function and call it when necessary.

Cismontane

Can you give me a little example for "passing the function itself". Thanks for the fast answer! – Chant

In this case use an anonymous function: text: function() { someFunction(self.id); }. Before the call to the qtip function, add this: var self = this; - this ensures that you access the correct object inside the closure (which will have its own this bound to the global object) – Cismontane

I don't get it :/ Here is a little example. jsbin.com/olafop/edit#preview Can you edit the code? I'd really appreciate that. – Chant

I just noticed you are using the obsolete qtip1. You should really switch to qtip2; maybe v1 didn't support a callback function yet. – Cismontane

Answer 3

In Qtip2, it has changed to jquery style ui events

$('.selector').qtip({
   events: {
      render: function(event, api) { }, // old onRender
      show: function(event, api) {}, // old beforeHide (return false or call event.preventDefault() to stop the show)
      hide: function(event, api) {} // old beforeHide (same as above)
   }
})

Purim