Change jQuery Tipsy plugin gravity on live

Question

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");
});

Answer 1

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("...");

Answer 2

Clone the element then remove the original element. And add the clone with changed gravity like this:

$('.demo').click(function () {
    var el = $('[data-demo]');
    var clone = $(el.clone());
    el.before(clone);
    el.remove();
    clone.tipsy({
        title: 'data-demo',
        gravity: 's'
    });
    alert("Gravity changed");
});

jsFiddle

Answer 3

You can change the gravity after creating the tooltip by accessing tipsy's configuration data:

$('[data-demo]').data('tipsy').options.gravity = 's';

I tested gravity and title with good results: http://jsfiddle.net/mikeular/h5y14qe3/6/