Search code examples
javascriptjqueryjquery-pluginstipsy

Change jQuery Tipsy plugin gravity on live

I am using jQuery Tipsy plugin and I am wondering if it is possible to change the gravity dynamically.

I have been trying it without success: http://jsfiddle.net/YSYuu/

Here's the code anyway: 

$('[data-demo]').tipsy({
    title: 'data-demo',
    gravity: 'n'
});

//changing it on real time
$('.demo').click(function () {
    $('[data-demo]').tipsy({
        title: 'data-demo',
        gravity: 's'
    });
    alert("Gravity changed");
});
Solution

  • The problem is that tipsy binds event on a specific element for speed and within the plugin there is no unbind event. What you could do is to clone your element; and its probably the only way. (plugin limitations).

    Here's the solution:

    $('.text').tipsy({
    title: 'data',
    gravity: 's'
})


$(".demo").on("click", function(){
    $(".text").remove().clone().appendTo("body").tipsy({
       title: 'data',
       gravity: 'n'
    })

});

    JSFiddle: http://jsfiddle.net/javascript/YSYuu/3/

    Of course you would append to the exact same location where it was. To get its location you could use $(this).parent().children().index(this) and then append $("#whatever li:eq(2)").after("...");