實時更改jQuery Tipsy插件的重力

Question

我正在使用jQuery Tipsy插件，並且想知道是否可以動態更改重力。

我一直在嘗試沒有成功： http : //jsfiddle.net/YSYuu/

無論如何，這是代碼：

$('[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

問題在於，tipsy綁定事件是為了提高速度在特定元素上，並且插件中沒有取消綁定事件。 您可以做的就是克隆您的元素。 這可能是唯一的方法。 （插件限制）。

解決方法如下：

$('.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/

當然，您將附加到其所在的完全相同的位置。 要獲取其位置，可以使用$(this).parent().children().index(this) ，然后附加$("#whatever li:eq(2)").after("...");

Answer 2

克隆元素，然后刪除原始元素。 然后添加重力改變的克隆，如下所示：

$('.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

您可以在創建工具提示后通過訪問Tipsy的配置數據來更改重力：

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

我測試了gravity和title ，並title了良好的效果： http : //jsfiddle.net/mikeular/h5y14qe3/6/