jquery tipsy plugin

Question

Tipsy jquery plugin is installed in my app

This is in my load function

 $(function() {
    tipsy();
 });

Below code is in a js file

var htm = '<div id="new_div" onmouseover="tipsy(this);">' ;

function tipsy(tip)
{
    if ( '' != sumtitle )
    {
        tip.title =  tip.innerHTML;
    }
    else if(tip)
    {
        tip.title =  tip.innerHTML;
    }
    $(tip).tipsy({gravity: 'w'});
}

How is that the normal title shows up first and then the jquery tip later.

Answer 1

The tipsy plugin seems to remove the title attribute and assign its value to a custom attribute called original-title to avoid the default browser tooltip from showing. Maybe in your case, this happens too late: The mouse hovers over the element, this initiates the native browser tooltip. Then, tipsy() is executed on the element and switches the attribute name, but that is too late because the timeout for the native tooltip has already started.

You should probably prevent the default action of the event, for example:

$('#new_div').bind('mousover', function (e) {
    tipsy(this);
    e.preventDefault();
});

EDIT: As this does not seem to have the desired effect, please call tipsy($('#new_div')) right after the div is created and remove the mouseover handler. What you have been doing might be a bit problematic anyway: The tipsy plugin probably uses the mouseover event, and you call .tipsy( { gravity: 'w' } ) in an onmouseover event handler. Repeatedly, if you mouseout and then mousover again. That's a lot of unnecessary event assignments.

Answer 2

You're doing it wrong. Try this:

$('#new_div').tipsy();

jQuery is designed for using the selectors in JS code. No onsomething events in HTML, please.

Answer 3

This is a known bug and will be fixed in the next version. For now please use the "Download Source" link on this commit:

http://github.com/jaz303/tipsy/commit/88923af6ee0e18ac252dfc3034661674b7670a97