Почему стиль подсказки начальной загрузки не отображается? - PullRequest
Новая
       14

Почему стиль подсказки начальной загрузки не отображается?

2 голосов
/ 20 апреля 2019

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

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/

Любая помощь будет принята с благодарностью.Заранее спасибо!

1 Ответ

0 голосов
/ 20 апреля 2019

Присвойте класс элементу и примените стиль к классу в 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>
...