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

Twitter Bootstrap Popover add a callback function with event

本文关键字：一个 事件 函数 回调 Popover Bootstrap 添加 Twitter      更新时间：2023-10-04

我想实现一个基于鼠标点击位置的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'
      });
    });

尝试

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

相关文章：