Question

我一直试图操纵bootstrap工具提示的定位而没有成功。

尝试＃1 ：

stuff.tooltip({
    container: 'body',
    placement: function(tip, el) {
        // played with tip, but it still add style: top, left at the end...
    }
});

尝试＃2 ：

stuff.tooltip({
    container: 'body',
    placement: 'top'
}).on("show.bs.tooltip", function() {
    // don't have access of the tip here
});

尝试＃3 ：

stuff.tooltip({
    container: 'body',
    placement: 'top'
}).on("shown.bs.tooltip", function() {
    // doing anything to the tip at this point would cause visible change
});

有什么想法吗？

Answer 1

使用CSS处理

最好的情况是，您可以使用提前编写的CSS专门设置工具提示的样式。只要您不需要根据仅在运行时可用的信息动态更改工具提示的样式。 CSS将立即应用于插入DOM的元素，而不会出现FOUC问题。

＆＃13;

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom'
  });
  
});

＆＃13;

.tooltip .tooltip-inner {
  background-color: yellow;
  color: black;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on Bottom
</button>

＆＃13;

如果默认的展示位置选项和CSS不适用，您还会尝试做什么？

展示处理

您无法在展示活动期间访问工具提示...但是......您可以动态更改模板选项，以便生成的工具提示具有自定义样式。

＆＃13;

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom'
  }).on("show.bs.tooltip", function (e) {
     var $tooltip = $(this).data('bs.tooltip')
     var $template = $($tooltip.options.template)

     // whatever modifications you'd like to do here while invisible
     $template.find('.tooltip-inner')
                    .css("background", "yellow")
                    .css("color", "black")
     
     // reapply template
     $tooltip.options.template = $template[0].outerHTML;
  });

});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on Bottom
</button>

＆＃13;

处理时显示

您可以修改工具提示模板以包含隐藏的类，并使用visibility: hidden;修改样式。然后，一旦工具提示出现在 shown 事件中，请根据需要进行修改，然后删除该类。

注意：不要尝试使用类名hidden或hide，因为这些是由bootstrap拍摄并设置display:none。如果工具提示显示设置为无，则元素将被错误定位。所以我们必须让它占据空间，但在我们准备渲染之前保持隐身。

＆＃13;

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom',
    template: '<div class="tooltip init" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

  }).on("shown.bs.tooltip", function (e) {
     var $tooltip = $(this).data('bs.tooltip')
     
     // whatever modifications you'd like to do here while invisible
     $tooltip.$tip.find('.tooltip-inner')
                    .css("background", "yellow")
                    .css("color", "black")
     
     // remove invisibility cloak
     $tooltip.$tip.removeClass('init');
  });

});

＆＃13;

.tooltip.init { 
  visibility: hidden;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on bottom
</button>

＆＃13;

如何在显示之前更改Bootstrap样式？

1 个答案:

使用CSS处理

展示处理

处理时显示