twitter-bootstrap 使用 twitter bootstrap 创建工具提示/弹出框后的回调函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14694930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Callback function after tooltip / popover is created with twitter bootstrap?
提问by Jose Browne
I want to manipulate a tooltip or popover after it is created with twitter bootstrap. As far as i know there isn't a build in way to do this.
我想在使用 twitter bootstrap 创建工具提示或弹出窗口后对其进行操作。据我所知，没有构建方法可以做到这一点。
$('#selector').popover({
placement: 'bottom'
});
For example lets say i want to move the created tooltip up 5px and left 5px from it's calculated location. Any ideas on the best way to do this?
例如，假设我想将创建的工具提示从计算位置向上移动 5px 并向左移动 5px。关于做到这一点的最佳方法的任何想法？
This is what i'd like to do:
这就是我想做的：
$('#selector').popover({
placement: 'bottom',
callback: function(){
alert('Awesome');
}
});
回答by user20140268
Works for tooltip:
适用于工具提示：
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')
}
});
回答by Michael Cho
Maybe this wasn't available when the previous answers were given but as of 2016, you can attach events to popovers (functionally equivalent to a callback).
也许在给出之前的答案时这不可用，但截至 2016 年，您可以将事件附加到弹出窗口（功能上等同于回调）。
eg
例如
$('#myPopover').on('shown.bs.popover', function () {
// do something…
})
Events include:
活动包括：
- show.bs.popover
- shown.bs.popover
- hide.bs.popover
- hidden.bs.popover
- inserted.bs.popover
- show.bs.popover
- 显示.bs.popover
- 隐藏.bs.popover
- 隐藏.bs.popover
- 插入.bs.popover
Ref bootstrap docs
参考引导文档
回答by Fred
This answer was posted just to clarify things as requested by crafter and contains code from the comment by Marquez.
发布此答案只是为了澄清 Crafter 的要求，并包含 Marquez 评论中的代码。
First you extend Bootstrap's popover to handle a callbackoption.
首先你扩展 Bootstrap 的 popover 来处理一个callback选项。
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
tmp.call(this); if (this.options.callback) {
this.options.callback();
}
}
Then you add a callbackproperty to your option object and assign it with an anonymous function.
然后您将一个callback属性添加到您的选项对象并为其分配一个匿名函数。
$('#popover-foo').popover({
content: 'Hello world',
callback: function () {
alert('Hello');
}
});
回答by Michiel
Other Workaround:
其他解决方法：
- Use the show.bs.popover or shown.bs.popover listeners
In the callback, the 'shown' event data links to the target which holds the popover ID, from here you could do the rest
$('body') .popover(options) .on('shown.bs.popover', function(shownEvent) { update_popover_data(shownEvent); });
- 使用 show.bs.popover 或 shown.bs.popover 侦听器
在回调中，'shown' 事件数据链接到包含弹出框 ID 的目标，从这里你可以做剩下的事情
$('body') .popover(options) .on('shown.bs.popover', function(shownEvent) { update_popover_data(shownEvent); });
Callback function:
回调函数：
function update_popover_data(shownEvent) {
var id = $(shownEvent.target).attr('aria-describedby');
$('#'+id).html('Your New Popover Content');
}
