Блог

Главная - Вопросы по программированию - Всплывающая подсказка начальной загрузки с HTML в строке

Всплывающая подсказка начальной загрузки с HTML в строке

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я пытаюсь добавить таблицу к созданному мной div. В эту таблицу я хотел бы добавить всплывающую подсказку bootstrap с некоторыми классами HTML и css. При этом мой вывод всегда возвращает мой HTML в виде текстового отображения. У меня возникают проблемы при попытке создать результат, который я ищу.

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

Вот пример моего кода:

  $('[data-toggle="tooltip"]').tooltip()
 
 
 let html = ""
 
html  = '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class="row"><p>hello world</p></div>"> Test HTML </a >';

 $("#tooltipData").html(html); 
 .row {
  color:red;
} 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>

<br/> 
<br/>

<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>hello world</div>"> Test HTML </a >

Первый div tooltipData является примером проблем, с которыми я сталкиваюсь.

Вторые <a> данные — это пример того, как всплывающая подсказка работает должным образом, но я не могу получить тот же результат из первого примера tooltipData .

Мой ожидаемый результат — добавить в div и получить тот же результат, что и <a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'><p>hello world</p> </div>" Test </a >

Я ожидаю, что наведу курсор на первый «Тестовый HTML», и всплывающая подсказка будет прочитана hello world как вторая.

Ответ №1:

Да, вы можете сделать это ' , заключив строку в кавычки. Но вы также должны убедиться $('[data-toggle="tooltip"]').tooltip() , что рендеринг выполняется после добавления html-кода в js. Смотрите здесь:

 let html = ""
 
html  = '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row' >ok</div>"> Test HTML </a >';

 $("#tooltipData").html(html);
 
 $('[data-toggle="tooltip"]').tooltip() 
 .row {
  color:red;
} 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>



<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>ok</div>"> Test HTML </a >

Метки: