Блог

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

 data-html="true"
  

чтобы использовать HTML в моей всплывающей подсказке. Почему он не красный?

 <button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red;'>this text should be red</div>">
    Press me
</button>
  

По тому же вопросу я хочу, чтобы всплывающая подсказка в следующей всплывающей подсказке отображалась в первую очередь. Табличная среда полностью скрывает ее. Это та же проблема?

 <button data-toggle="tooltip" data-html="true" data-trigger="click" title="<table><tr><td>this text should appear</td></tr></table>">
    Press me 2
</button>
  

Я создал скрипку, которая четко показывает проблему.

https://jsfiddle.net/ws9z37q2/9/

Любая помощь будет высоко оценена. Заранее спасибо!

Присвоите элементу класс и примените стиль к классу в CSS.

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

 .red {
  color: red
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div class='red'>this text should be red</div>">
  Press me
</button>  

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

Таким образом, в качестве альтернативы вы можете заставить его работать, отключив sanitize опцию (не рекомендуется).

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red'>this text should be red</div>">
  Press me
</button>