我正在使用 Twitter Bootstrap 提供的工具提示 (http://twitter.github.com/bootstrap/javascript.html#tooltips)。
我的 DOM 中有一些动态插入的标记,需要触发工具提示。这就是为什么我通过以下方式触发工具提示(https://github.com/twitter/bootstrap/issues/4215):
$('body').tooltip({
delay: { show: 300, hide: 0 },
selector: '[rel=tooltip]:not([disabled])'
});
为了避免工具提示放置得太靠近屏幕边缘,我需要能够根据触发工具提示的元素的位置动态设置它们的位置。我想按以下方式进行:
$('body').tooltip({
delay: { show: 300, hide: 0 },
// here comes the problem...
placement: positionTooltip(this),
selector: '[rel=tooltip]:not([disabled])'
});
function positionTooltip(currentElement) {
var position = $(currentElement).position();
if (position.left > 515) {
return "left";
}
if (position.left < 515) {
return "right";
}
if (position.top < 110){
return "bottom";
}
return "top";
}
如何将 currentElement 正确传递给positionTooltip函数,以便为每个工具提示返回适当的放置值?
提前致谢
最佳答案
Bootstrap 使用包含元素的参数调用放置函数
this.options.placement.call(this, $tip[0], this.$element[0])
因此,对于您的情况,请执行以下操作:
$('body').tooltip({
delay: { show: 300, hide: 0 },
placement: function(tip, element) { //$this is implicit
var position = $(element).position();
if (position.left > 515) {
return "left";
}
if (position.left < 515) {
return "right";
}
if (position.top < 110){
return "bottom";
}
return "top";
},
selector: '[rel=tooltip]:not([disabled])'
});
关于javascript - 动态定位 Bootstrap 工具提示(用于动态生成的元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13515364/