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

У меня есть некоторые проблемы с настройкой всплывающих подсказок в 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;
}

jquery css bootstrap-4 customization tooltip
person Arthur Dejonghe    schedule 20.01.2020    source источник
comment
Вы можете изменить фон и цвет текста всплывающей подсказки в CSS.   -  person Rory McCrossan    schedule 20.01.2020
comment
Да, я знаю, но я не знаю, как это сделать правильно, я уже пробовал это несколько раз в css. но ни один из них не работает нормально .. Спасибо   -  person Arthur Dejonghe    schedule 20.01.2020
comment
В этом случае, пожалуйста, добавьте CSS, который вы пробовали, к вопросу. SO здесь, чтобы помочь вам отладить проблемы, а не писать код для вас   -  person Rory McCrossan    schedule 20.01.2020
comment
Я загрузил Css заранее спасибо!   -  person Arthur Dejonghe    schedule 20.01.2020
comment
Когда я добавляю class=tooltip , это не влияет на css, поэтому я не понимаю, почему это не работает, хотя работает с другими классами в bootstrap4.   -  person Arthur Dejonghe    schedule 20.01.2020

Ответы (1)


arrow_upward
3
arrow_downward

Проблема с вашим 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>

person Rory McCrossan    schedule 20.01.2020