Question

How can i call two functions on the same selector and one event and pass data between them ?
The first function is .hover which

 $("#cartItems tr.cItem").hover(
   function ()
   {
       receipt = $(this).next().children().text();
       //I want to pass receipt value to second function
   },
   function()
   {

   }
 )  

and the second function is:

$("#cartItems tr.cItem").qtip(
{
   content: receipt, // i need to pass it here
   show: 'mouseover',
   hide: 'mouseout'
});

it is tooltip that pops up “contet” value in small window

How can I call / merge this two functions together?

Answer 1

You don’t want to wait until the element is hovered to call qtip, the qtip plug-in is meant to be called to set up hovering behavior.

If the content you want in the qtip exists as of when you’re doing this, this may be what you want:

$("#cartItems tr.cItem").each(function() {
    var $this = $(this);
    $this.qtip({
        content: {
            text: $this.next().children().text()
        }
    });
});

That sets up the qtips once, with the text derived from the next element’s child content.

If you want to do that dynamically (e.g., the next element’s child content may change as the user does things on the page), then:

$("#cartItems tr.cItem").mouseenter(function() {
    var $this = $(this);
    $this.qtip("option", "content.text", $this.next().children().text());
}).qtip();

That sets up the qtips (once), and sets up a mouseenter handler that sets the qtip text when the mouse actually enters the element.