Question

我想实现一个基于鼠标点击位置定位的Bootstrap Popover。似乎我需要这个事件告诉我鼠标的x和y位置以及弹出框的高度和宽度，以正确计算这些信息。

我目前正在做：

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

Twitter Bootstrap Popover添加一个带有事件的回调函数

1 个答案: