twitter-bootstrap 将 Bootstrap 的工具提示对齐到元素的左侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16618933/
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
Align Bootstrap's tooltip to the left of the element?
提问by BlueCaret
I am using Bootstrap'stooltip script and have a problem when I have the tooltip on text that gets truncated. I am using CSS to truncate the text, and then have a tooltip on that text so you can mouse over and see the full text. My problem is that when the text is truncated, the tooltip still centers on the element as if it wasn't truncated.
我正在使用Bootstrap 的工具提示脚本，当我在被截断的文本上使用工具提示时遇到了问题。我正在使用 CSS 截断文本，然后在该文本上有一个工具提示，以便您可以将鼠标悬停在上面并查看全文。我的问题是当文本被截断时，工具提示仍然以元素为中心，就好像它没有被截断一样。
Aside from this issue, I'd just rather it be styled like the following anyway. I would like to have it so the tooltip aligns to the left of the element, and the arrow on the tooltip goes to the left as well. Or if the tooltip is on the side of the element then it gets aligned to the top and the arrow is on the top.
除了这个问题，我宁愿它的样式如下。我想要它，以便工具提示与元素左侧对齐，工具提示上的箭头也向左对齐。或者，如果工具提示位于元素的一侧，则它会与顶部对齐，而箭头位于顶部。
Basically it looks like this right now:
基本上它现在看起来像这样：
################
# TOOLTIP #
################
v
Some really long text th...
I would like it to look like this:
我希望它看起来像这样：
################
# TOOLTIP #
################
v
Some really long text th...
Or for on the side like this:
或者像这样：
################ > Some really long text th...
# TOOLTIP #
################
Thank you.
谢谢你。
[EDIT] I've firgured out the moving of the arrow, that's just simple css. But the aligning of the tooltip itself seems to be part of the javascript.
[编辑] 我已经弄清楚了箭头的移动，这只是简单的 css。但是工具提示本身的对齐似乎是 javascript 的一部分。
采纳答案by Zim
I think you'll need to adjust the tooltip-arrowCSS and the position of the entire tooltip. This will get you close to it, but it may need more tweaks...
我认为您需要调整tooltip-arrowCSS 和整个tooltip. 这会让你接近它，但它可能需要更多的调整......
.tooltip-arrow CSS
.tooltip-箭头 CSS
.tooltip.right .tooltip-arrow{
top: 5%;
margin-top: 0px;
}
.tooltip.top .tooltip-arrow{
left: 6%;
bottom:1px;
}
jQuery function to adjust placement of the tooltip..
用于调整工具提示位置的 jQuery 函数。
$("[data-placement=right]").hover(function(){
$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});
Demo on Bootply
Bootply 上的演示
EDIT:You can also position the .tooltip with CSS only. Alternate demo
编辑：您也可以仅使用 CSS 定位 .tooltip。替代演示
.tooltip.right {
margin-top:8px;
}
回答by Du?an Ma?ar
To achieve the following layout:
要实现以下布局：
element
^
################
# TOOLTIP #
################
CSS
CSS
.tooltip.bottom .tooltip-arrow {
left: 90% !important;
}
JS
JS
$('[data-toggle=tooltip]').on('inserted.bs.tooltip', function() {
$('.tooltip').css('opacity', 0);
});
$(''[data-toggle=tooltip]'').on('shown.bs.tooltip', function() {
var $tooltip = $('.tooltip');
$tooltip.css('left', $tooltip.offset().left - $tooltip.width() / 2);
$tooltip.css('opacity', 1);
});
There is a small delay due to hiding and showing the tooltip but the positioning works fine regardless of the tooltip size.
由于隐藏和显示工具提示，有一个小的延迟，但无论工具提示大小如何，定位都可以正常工作。
