Twitter Bootstrap Popover添加一個回調函數，事件

Question

我想實現一個基於鼠標點擊位置的Bootstrap Popover。 似乎我需要這個事件來告訴我鼠標的x和y位置以及popover的高度和寬度以正確計算這些信息。

我目前做的：

var pt = $.fn.popover.Constructor.prototype.show; 
    $.fn.popover.Constructor.prototype.show = function() { 
    pt.call(this); 
    if (this.options.callback) { 
     this.options.callback(); 
    } 
    }; 

$(this).popover({ 
     container : 'body', 
     html: 'true', 
     title: '<div id="popover-title">Title </div>', 
     content : '<div id="popover-body">Information </div>', 
     callback: function() { 
     // position calculation here. 
     } 
    }) 

但我無法弄清楚如何從回調獲得事件。

我也不太確定這是否是這樣做的正確方法。如果不是，請指出。

在此先感謝。

編輯：

我這樣做是爲了讓它工作，感謝您的幫助。

$(this).popover({ 
     placement: 'top', 
     container : 'body', 
     html: 'true', 
     title: '<div id="popover-title">Title </div>', 
     content : '<div id="popover-body">Information </div>', 
     trigger: 'manual' 
    }).click(function (e) { 
     var popover = $("#popover-title"); 
     $(this).popover((popover.length != 0)? 'hide' : 'show'); 

     popover = $("#popover-title"); 
     if (popover && popover.parent() && popover.parent().parent()) { 
     popover = popover.parent().parent(); 
     } 

     var left = e.pageX; 
     var top = e.pageY; 
     var height = popover.height(); 
     var width = popover.width(); 

     popover.css({ 
     top: top - height, 
     left: left - width/2 + 'px' 
     }); 
    }); 

Answer 1

嘗試

jQuery(function ($) { 
    var flag = false; 
    $(document).popover({ 
     container: 'body', 
     html: 'true', 
     title: '<div id="popover-title">Title </div>', 
     content: '<div id="popover-body">Information </div>', 
     trigger: 'manual' 
    }).click(function (e) { 
     $(this).popover(flag ? 'hide' : 'show'); 
     flag = !flag; 
     var pop = $(this).data('bs.popover'); 

     //here pop.tip() will give the popover element also e can give the mouse cordinated 

     pop.tip().css({ 
      top: e.pageX, 
      legt: e.pageY 
     }) 
    }); 
}); 

演示：Fiddle