javascript - 使用 twitter 引导程序创建工具提示/弹出框后的回调函数？

Question

我想在使用 twitter bootstrap 创建工具提示或弹出框后对其进行操作。据我所知，没有办法做到这一点。

$('#selector').popover({
  placement: 'bottom'
});

例如，假设我想将创建的工具提示向上移动 5px 并从计算位置离开 5px。关于最好的方法的任何想法？

这就是我想做的：

$('#selector').popover({
  placement: 'bottom',
  callback: function(){
    alert('Awesome');
  }
});

Answer 1

适用于工具提示：

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

this.$('#selector').tooltip({ 
  placement: 'top', 
  callback: function() { 
    alert('hello') 
  } 
});

Answer 2

也许这在给出之前的答案时不可用，但截至 2016 年，您可以将事件附加到弹出框（功能上等同于回调）。

例如

$('#myPopover').on('shown.bs.popover', function () {
  // do something…
})

活动包括：

• show.bs.popover
• 显示的.bs.popover
• hide.bs.popover
• hidden.bs.popover
• 插入的.bs.popover

参考引导文档

Answer 3

发布此答案只是为了澄清工匠要求的事情，并包含 Marquez 评论中的代码。

首先你扩展 Bootstrap 的弹出框来处理一个callback选项。

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

然后，您将一个callback属性添加到您的选项对象并使用匿名函数为其分配。

$('#popover-foo').popover({
    content: 'Hello world',
    callback: function () {
        alert('Hello');
    }
});

Answer 4

其他解决方法：

1. 使用 show.bs.popover 或 shown.bs.popover 监听器

2. 在回调中，“显示”事件数据链接到保存弹出框 ID 的目标，从这里你可以做剩下的事情

   $('body')
   .popover(options)
   .on('shown.bs.popover', function(shownEvent) {
           update_popover_data(shownEvent);
   });
   

回调函数：

    function update_popover_data(shownEvent) {
         var id = $(shownEvent.target).attr('aria-describedby');
         $('#'+id).html('Your New Popover Content');
    }