Могу ли я использовать сложный HTML-код с помощью Twitter Bootstrap Tooltip?

Если я проверяю официальную документацию, я могу увидеть свойство с именем 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 внутри всплывающей подсказки?

Ответ 1

Этот параметр касается только того, собираетесь ли вы использовать сложный html во всплывающей подсказке. Установите его в true, а затем нажмите html в атрибут title тега.

Смотрите этот скрипт здесь - Я установил атрибут html в true через data-html="true" в теге <a>, а затем просто добавлен в html ad hoc в качестве примера.

Ответ 2

Как обычно, используя 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 не экранирован, и пользователь может самостоятельно отредактировать биографию, он может ввести вредоносный код.

Ответ 3

Атрибут данных 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

Ответ 4

Еще одно решение избежать вставки 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

Ответ 5

установите для параметра "html" значение true, если вы хотите включить html в подсказку. Фактический html определяется опцией "title" (атрибут заголовка ссылки не должен быть установлен)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Живой пример