如何在显示引导程序样式之前对其进行更改

How to change Bootstrap style before it is shown?

本文关键字：显示 引导程序 样式      更新时间：2023-09-26

我一直试图操纵引导工具提示的位置，但没有成功。

尝试 #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
});

有什么想法吗？

使用 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 事件中，根据需要对其进行修改，并通过删除类来完成。

注意：不要尝试使用类名hidden或hide，因为它们是由引导程序获取的，并设置display:none。 如果工具提示显示设置为 none，则元素的位置将不正确。 所以我们必须让它占用空间，但在我们准备好渲染之前保持不可见。

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

相关文章：