This is jQuery 1.9.0. I use qTip 1.0.0-rc3, which I have stripped out of all $.browser
code (since it has disappeared since 1.9.0). I attach a simple, bare bones (not even restyled for now) tip. The full function is below:
// Function to report a parse error
function reportParseError(parseError, msgHandle, textArea)
{
// Find the inner link element -- there is only one, so this is "safe".
var link = msgHandle.find("a");
link.text("line " + parseError["line"]);
// Add an onclick hook to the link. When clicking on the link, the caret
// in the text area will move to the position of the error.
link.on("click", function(e)
{
e.preventDefault();
textArea.focus().setCursorPosition(parseError["offset"]);
});
link.qtip({
content: parseError["message"],
show: "mouseover",
hide: "mouseout",
position: {
corner: {
target: "topMiddle",
tooltip: "bottomMiddle"
}
}
});
// Show the message
msgHandle.show();
}
This function does what I want (the tip appears above the link).
The problem is when a previous content for the tip (parse messages can be quite big) was larger than the newer content: I am then seeing the old contents below the new ones on a mouseover (both contents disappear on mouseout).
How do you solve that?
Edit: after some more thinking about it, it appears that the observed behavior is expected: each time this function is triggered, a new tooltip is created. It means the tip would need to be attached at "init time" (ie, when document.ready()) and filled with an appropriate content when needed. Do I get this right?
OK, answer to self.
I could not get qTip2 to work at all, so qTip 1 it is.
The problem was as I discovered, tooltips (divs, in fact) were created but never destroyed.
The solution was to create two dummy tooltips on document.ready(), an destroy them right before recreating them, since I was unable to grab a handle on the tooltips in order to update their contents.