Правильный способ настроить ширину всплывающей подсказки Bootstrap 4, цвет и стрелку?

Question

У меня есть некоторые проблемы в Bootstrap при настройке подсказок. Я хочу, чтобы всплывающие подсказки были шире, чтобы у них был собственный цвет фона, а также цвет текста.

Я пробовал кучу разных методов, однако не получилось так, как я хотел, чтобы это работало. У кого-нибудь есть опыт настройки всплывающей подсказки внутри Bootstrap4? Я уже нашел некоторые темы, но все они были о Bootstrap 2 или 3.

Я разработал подсказку, которую я хочу в Photoshop, вот изображение: Как я хочу всплывающую подсказку . Вот как это выглядит сейчас: Как подсказка сейчас

Это код, который я использовал до сих пор (я не публикую S CSS, потому что все это не работал):

<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 заключается в том, что он не указывает c достаточно, чтобы переопределить стиль по умолчанию.

Для этого вы можете использовать селектор с более высокой специфичностью, чем стиль по умолчанию 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>