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