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

Question

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

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

我在 Photoshop 中设计了一个我想要的工具提示，图片如下：How I want the tooltip. This is how it looks right now: How the tooltip is right now

这是我目前使用的代码（我没有发布 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>

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

Correct way to customize a Bootstrap 4 tooltip width, color & arrow?

css

jquery

customization

tooltip

bootstrap-4