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
shown.bs.popover
hide.bs.popover
hidden.bs.popover
inserted.bs.popover

参考bootstrap docs

Answer 3

这个答案仅仅是为了澄清Crafter所要求的内容，并包含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

其他解决方法：

使用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');
    }

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

4 个答案: