12

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

除了这个问题,我宁愿它的样式如下所示。我希望它使工具提示与元素的左侧对齐,并且工具提示上的箭头也向左对齐。或者,如果工具提示在元素的一侧,那么它会与顶部对齐并且箭头在顶部。

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

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

我希望它看起来像这样:

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

或者像这样:

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

谢谢你。

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

4

2 回答 2

8

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

.tooltip-箭头 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;
}
于 2013-05-18T12:14:28.210 回答
1

实现如下布局:

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

CSS

.tooltip.bottom .tooltip-arrow {
  left: 90% !important;
}

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);
});

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

于 2016-08-25T08:39:33.057 回答