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

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 问题。

$(function () {

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

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

<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>

在默认放置选项和 CSS 不适用的情况下，您具体要做什么？

展会处理

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

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

});

<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>

显示处理

您可以修改工具提示模板以包含隐藏的 class，并使用 visibility: hidden; 设置样式。然后，一旦工具提示出现在 shown 事件中，根据需要修改它并通过删除 class.

来完成

Note: do not try to use the class name hidden or hide as these are taken by bootstrap and set display:none. If the tooltip display is set to none, then the element will be incorrectly positioned. So we have to let it occupy space, but just stay invisible until we're ready to render.

$(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');
  });

});

.tooltip.init { 
  visibility: hidden;
}

<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>

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

How to change Bootstrap style before it is shown?

javascript

jquery

twitter-bootstrap

position

tooltip

处理CSS

展会处理

显示处理