使用 twitter bootstrap 创建工具提示/弹出框后的回调函数？答案

【问题标题】：Callback function after tooltip / popover is created with twitter bootstrap?使用 twitter bootstrap 创建工具提示/弹出框后的回调函数？
【发布时间】：2013-02-04 20:21:15
【问题描述】：

我想在使用 twitter 引导程序创建工具提示或弹出框后对其进行操作。据我所知，没有内置的方法可以做到这一点。

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

例如，假设我想将创建的工具提示向上移动 5 像素，并从计算位置向左移动 5 像素。有任何关于最佳方式的想法吗？

这就是我想做的：

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

【问题讨论】：

扩展.popover函数。 stackoverflow.com/questions/9137311/…

标签： javascript jquery twitter-bootstrap

【解决方案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') 
  } 
});

【讨论】：

可能看起来很傻，但对我来说如何使它与弹出框一起工作并不明显。对于那些也可能遇到这个小挑战的人，这里是如何： var tmp = $.fn.popover.Constructor.prototype.show; $.fn.popover.Constructor.prototype.show = function () { tmp.call(this); if (this.options.callback) { this.options.callback(); } };
有谁知道哪一种原型方法用于取消？ github.com/twbs/bootstrap/blob/v2.3.2/js/bootstrap-tooltip.js
@marquez，请将此解决方案添加到自己的答案中，以便轻松找到，因为这是问题的解决方案。

【解决方案2】：

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

例如

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

活动包括：

show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popover
inserted.bs.popover

参考bootstrap docs

【讨论】：

最佳答案，因为现在这是 Bootstrap 本身提供的功能！

【解决方案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');
    }
});

【讨论】：

【解决方案4】：

其他解决方法：

使用 show.bs.popover 或 shown.bs.popover 侦听器

在回调中，“显示”事件数据链接到保存弹出框 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');
    }

【讨论】：