自定义 Bootstrap 4 工具提示宽度、颜色和箭头的正确方法？

Question

我在 Bootstrap 自定义工具提示时遇到了一些问题。 我想让工具提示更宽，并让它具有自定义背景颜色和文本颜色。

我尝试了很多不同的方法，但是它并没有达到我想要的效果。 有没有人有在 Bootstrap4 中自定义工具提示的经验？ 我确实已经找到了一些主题，但所有主题都与 Bootstrap 2 或 3 有关。

我在 Photoshop 中设计了一个我想要的工具提示，这是图像：我想要工具提示的方式。 这就是它现在的样子：工具提示现在的样子

这是我到目前为止使用的代码（我没有发布 SCSS，因为所有这些都不起作用）：

<h1 data-toggle="tooltip" title=" example">MENU LUX</h1>

$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

css：

.tooltip {
border-color: rgb(151, 151, 151);
background-color: rgb(151, 151, 151);
color: black;
}

Answer 1

您的 CSS 的问题在于它不够具体，无法覆盖默认样式。

为此，您可以使用比默认 Bootstrap 样式具有更高特异性的选择器； 请注意将body到下面的选择器中。

 $(function() { $('[data-toggle="tooltip"]').tooltip(); });

 body .tooltip-inner { background: rgb(151, 151, 151); color: black; } body .tooltip .arrow::before { border-bottom-color: rgb(151, 151, 151); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div id="container"> <h1 data-toggle="tooltip" title="example">MENU LUX</h1> </div>