Javascript 动态定位 Bootstrap 工具提示（用于动态生成的元素）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13515364/
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
Dynamically position Bootstrap tooltip (for dynamically generated elements)
提问by maze
I am using the Tooltips provided by Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).
我正在使用 Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips) 提供的工具提示。
I have some dynamically inserted markup in my DOM which needs to trigger the tooltips. That's why I trigger tooltips in the following way (https://github.com/twitter/bootstrap/issues/4215):
我的 DOM 中有一些动态插入的标记需要触发工具提示。这就是我以以下方式触发工具提示的原因（https://github.com/twitter/bootstrap/issues/4215）：
$('body').tooltip({
delay: { show: 300, hide: 0 },
selector: '[rel=tooltip]:not([disabled])'
});
To avoid tooltips being placed too close to the edge of the screen, I need to be able to set their position dynamically based on where the element which triggers the tooltip is positioned. I thought of doing it the following way:
为避免工具提示过于靠近屏幕边缘，我需要能够根据触发工具提示的元素的位置动态设置它们的位置。我想通过以下方式做到这一点：
$('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";
}
How can I pass currentElement correctly to the positionTooltip function in order to return the appropriate placement value for each tooltip?
如何将 currentElement 正确传递给 positionTooltip 函数，以便为每个工具提示返回适当的位置值？
Thanks in advance
提前致谢
回答by davidkonrad
Bootstrap calls the placement function with params that includes the element
Bootstrap 使用包含元素的参数调用放置函数
this.options.placement.call(this, $tip[0], this.$element[0])
so in your case, do this :
所以在你的情况下，这样做：
$('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])'
});
回答by charlietfl
The placementoption in docs allows for function . It isn't documented ( that I could find) what arguments are in the function. This is easy to determine however by logging argumentsto console.
placementdocs 中的选项允许 function 。没有记录（我可以找到）函数中的参数。然而，这很容易通过登录arguments到控制台来确定。
Here's what you can use:
以下是您可以使用的内容：
$('body').tooltip({
placement: function(tip, el){
var position = $(el).position();
/* code to return value*/
}
/* other options*/
})
回答by simo
This is how I place my tooltip in Bootstrap 2.3.2
这就是我在Bootstrap 2.3.2 中放置工具提示的方式
placement: function (tooltip, trigger) {
window.setTimeout(function () {
$(tooltip)
.addClass('top')
.css({top: -24, left: 138.5})
.find('.tooltip-arrow').css({left: '64%'});
$(tooltip).addClass('in');
}, 0);
}
Basically what I'm saying here is that my tooltip will be positioned on the top with some custom offset, also the little triangle arrow on the bottom will be slightly to the right.
基本上我在这里要说的是，我的工具提示将位于顶部并带有一些自定义偏移量，底部的小三角形箭头也会稍微向右。
At the end I'm adding the inclass which shows the tooltip.
最后，我添加了in显示工具提示的类。
Also note that the code is wrapped in setTimeout 0function.
还要注意代码被封装在setTimeout 0函数中。
回答by Mohsen
This is shorthand that i use to determine window width is smaller 768 or not, then change tooltip placement from left to top:
这是我用来确定窗口宽度是否小于 768 的速记，然后将工具提示位置从左更改为顶部：
placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
回答by Ludovic Guillaume
$(element).position()will not work properly if the option containeris set to the tooltip.
$(element).position()如果该选项container设置为工具提示，则将无法正常工作。
In my case, I use container : 'body'and have to use $(element).offset()instead.
就我而言，我使用container : 'body'并且必须使用$(element).offset()。
回答by Jonathan
this one worked for me
这个对我有用
$("[rel=tooltip]").popover({
placement: function(a, element) {
var position = $(element).parent().position();
console.log($(element).parent().parent().is('th:first-child'));
if ($(element).parent().parent().is('th:last-child')) {
return "left";
}
if ($(element).parent().parent().is('th:first-child')) {
return "right";
}
return "bottom";
},
});
