Использование style = '' внутри всплывающей подсказки

Question

У меня есть следующее: HTML:

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span style=&quot;color: #FF9AA2&quot;>Red</span>" aria-describedby="tooltip92967">My Tooltip Demo</a>

Подсказка bootstrap отображается правильно, за исключением того, что цвет диапазона меняется на красный. Как я могу стилизовать диапазон так, чтобы он применял цвет внутри подсказки? Весь текст - стандартный белый цвет подсказок bootstrap.

Answer 1

Вы можете попробовать что-то вроде ниже, где вы устанавливаете цвет в качестве атрибута данных элемента ссылки.

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

$('[data-toggle="tooltip"]').on('inserted.bs.tooltip', function () {
  var c = $(this).data("color");
  $('.tooltip span').css('color',c);
})

a {
 margin:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >Red</span>" data-color='#FF9AA2' aria-describedby="tooltip92967">My Tooltip Demo</a>

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >green</span>" data-color='#00FF22' aria-describedby="tooltip92967">another Tooltip Demo</a>

Ссылка: https://getbootstrap.com/docs/4.4/components/tooltips/#events