javascript - 如何在显示之前更改 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>

显示处理

您可以修改工具提示模板以包含隐藏类，并使用 visibility:hidden; 对其进行样式设置。然后，一旦工具提示出现在 shown 事件中，即可根据需要对其进行修改，并通过删除该类来完成。

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>