将Bootstrap的工具提示对齐到元素的左侧？

Question

我正在使用Bootstrap的工具提示脚本,当我在文本上的工具提示被截断时出现问题.我正在使用CSS截断文本,然后在该文本上有一个工具提示,以便您可以将鼠标悬停在上面并查看全文.我的问题是,当文本被截断时,工具提示仍然以元素为中心,就像它没有被截断一样.

除了这个问题,无论如何,我只是喜欢它的风格.我想拥有它,以便工具提示对齐元素的左侧,工具提示上的箭头也会向左移动.或者,如果工具提示位于元素的一侧,则它将与顶部对齐,箭头位于顶部.

基本上它现在看起来像这样:

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...

我希望它看起来像这样:

################
# TOOLTIP      #
################
 v
Some really long text th...

或者像这样:

################ > Some really long text th...
# TOOLTIP      #
################

谢谢.

[编辑]我已经确定了箭头的移动,这只是简单的CSS.但是工具提示本身的对齐似乎是javascript的一部分.

Answer 1

我认为你需要调整tooltip-arrowCSS和整个位置tooltip.这会让你接近它,但它可能需要更多调整......

.tooltip-arrow CSS

.tooltip.right .tooltip-arrow{
    top: 5%;
    margin-top: 0px;
}

.tooltip.top .tooltip-arrow{
    left: 6%;
    bottom:1px;
}

jQuery函数调整工具提示的位置..

$("[data-placement=right]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});

Bootply上的演示

编辑:您也可以只使用CSS定位.tooltip.替代演示

.tooltip.right {
    margin-top:8px;
}