Если я проверяю официальную документацию, я могу увидеть свойство с именем HTML:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
В нем говорится: "Вставьте html в всплывающую подсказку", но тип булев. Как я могу использовать сложный html внутри всплывающей подсказки?
Этот параметр касается только того, собираетесь ли вы использовать сложный html во всплывающей подсказке. Установите его в true, а затем нажмите html в атрибут title тега.
Смотрите этот скрипт здесь - Я установил атрибут html в true через data-html="true" в теге <a>, а затем просто добавлен в html ad hoc в качестве примера.
Как обычно, используя data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
JavaScript:
$("[rel=tooltip]").tooltip({html:true});
Параметр html указывает, как текст всплывающей подсказки должен быть превращен в элементы DOM. По умолчанию код Html скрыт во всплывающих подсказках, чтобы предотвратить атаки XSS. Скажем, вы показываете имя пользователя на своем сайте, и вы показываете небольшую биографию в подсказке. Если код html не экранирован, и пользователь может самостоятельно отредактировать биографию, он может ввести вредоносный код.
Атрибут данных html делает именно то, что он говорит в документах. Попробуйте этот маленький пример, без javascript nessecary (разбитый на строки для пояснения):
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
jsfiddle demos → bootstrap 2.x | bootstrap 3.x
Еще одно решение избежать вставки html в заголовок данных - создать независимый div с содержимым html tooltip и обратиться к этому div при создании всплывающей подсказки:
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
Таким образом вы можете создать сложный читаемый контент html и активировать столько всплывающих подсказок, сколько захотите.
live demo здесь, на codepen
установите для параметра "html" значение true, если вы хотите включить html в подсказку. Фактический html определяется опцией "title" (атрибут заголовка ссылки не должен быть установлен)
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});