Twitter bootstrap 对齐引导程序';元素左侧的工具提示?

Twitter bootstrap 对齐引导程序';元素左侧的工具提示?,twitter-bootstrap,alignment,tooltip,Twitter Bootstrap,Alignment,Tooltip,我正在使用工具提示脚本,当文本上的工具提示被截断时出现问题。我正在使用CSS截断文本,然后在该文本上有一个工具提示,以便您可以将鼠标悬停在上面并查看全文。我的问题是,当文本被截断时,工具提示仍然以元素为中心,就好像它没有被截断一样 除了这个问题,我还是希望它的样式如下。我希望它使工具提示对齐到元素的左侧,并且工具提示上的箭头也向左。或者,如果工具提示位于元素的侧面,则它将与顶部对齐,箭头位于顶部 基本上现在看起来是这样的: ################

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

除了这个问题,我还是希望它的样式如下。我希望它使工具提示对齐到元素的左侧,并且工具提示上的箭头也向左。或者,如果工具提示位于元素的侧面,则它将与顶部对齐,箭头位于顶部

基本上现在看起来是这样的:

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...
我希望它看起来像这样:

################
# TOOLTIP      #
################
 v
Some really long text th...
################ > Some really long text th...
# TOOLTIP      #
################
或者在这样的一面:

################
# TOOLTIP      #
################
 v
Some really long text th...
################ > Some really long text th...
# TOOLTIP      #
################
多谢各位


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

我认为您需要调整
工具提示箭头和整个
工具提示的位置。这将使你接近它,但它可能需要更多的调整

。工具提示箭头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')
});
编辑:您还可以仅使用CSS定位.tooltip


要实现以下布局:

          element
             ^
################
# TOOLTIP      #
################
CSS

JS


由于隐藏和显示工具提示,会有一点延迟,但无论工具提示大小如何,定位都可以正常工作。

我希望不必添加额外的javascript加载事件(如果这些不是正确的术语,请抱歉!)因为这是在一个ASP.net网站上,我们做的回发会把加载的东西弄得一团糟,迫使我们有更多的代码来让它工作。我希望在原始javascript代码中有一些可以编辑的东西。。也许吧?我想就是这样!非常感谢你!如果你把绳子弄长了,左上角就不能正常工作
$('[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);
});