Как я могу узнать, почему мой значок не принимает HTML-теги в подсказке?

Question

Я пытаюсь добавить предупреждение о значке начальной загрузки с подсказкой HTML на нем, следуя примеру: https://getbootstrap.com/docs/4.3/components/tooltips/

Однако в следующем коде отображается всплывающая подсказка, но теги HTML не интерпретируются.

Далее следует HTML-код значка (это значок внутри ячейки таблицы - td):

<span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>

Я попытался активировать всплывающие подсказки для функции $ (document) .ready, как указано на странице, с помощью

   // initialize tooltips
   $('[data-toggle="tooltip"]').tooltip()

Но все еще не мог понять, почему это происходит.

Я определенно не знаю, почему HTML не форматируется, и как отлаживать / понимать источник этой проблемы. Как бы вы начали отлаживать его?

Спасибо.

Answer 1

Ваш код работает нормально, используйте все ссылки, как показано ниже

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

$('[data-toggle="tooltip"]').tooltip();

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

  <span class="badge badge-pill badge-danger" data-toggle="tooltip" data-html="true" title="<b>Tooltip</b> <u>with</u> <b>HTML</b>">1</span>