Чи можу я використовувати складний HTML з підказкою Twitter Bootstrap?

143

Якщо я перевіряю офіційну документацію , я можу побачити властивість під назвою HTML:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

Там написано: "вставити html у підказку", але тип булів. Як я можу використовувати складний html всередині підказки?

— сергсерг
джерело

256

Цей параметр стосується того, чи збираєтесь ви використовувати складний html у підказці. Встановіть його, trueа потім натисніть HTML в titleатрибут тегу.

Дивіться цю скрипку тут - я встановити атрибут HTML для істинно через data-html="true"в <a>тезі , а потім просто додав в HTML спеціальний в якості прикладу.

— Джордж Вілсон
джерело

3

Добре, що їх документація не настільки чітка в цій галузі. Дякуємо, що поділилися цією відповіддю! :)

— сергсерг

3

Документація на завантажувальний пристрій - це сумно сміття :) Рада, що я можу розібратися!

— Джордж Вілсон

6

Приклад загадки не працює для мене. Я все ще бачу необроблений HTML-код.

— Sonson123

3

Можливо, якась зміна коду Bootstrap, як ви підозрюєте. Перш ніж я мав усі свої підказки, підключені до заголовків html, використовуючи {html: true} в атрибутах функції, але починаючи з 2.2.2> 2.3.1, мені довелося додати дані-html = "true" до моїх елементів і просто списати {html: true} частина. Мені дуже хочеться, щоб вони намагалися виправити все частіше вперше і не завдавати постійних порушень змін між релізами.

— Ендрю Свіхарт

1

Дивіться тут: jsfiddle.net/44khF/148 . Крім того, він, здається, працює лише з атрибутом даних і не використовує html: true при ініціалізації, якщо використовуються делегати.

— ptutt

34

Як звичайно, використовуючи 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 не уникнути, і користувач може сам редагувати біографію, він може ввести шкідливий код.

— Метт Зоннерт
джерело

5

data-original-titleє тимчасовим зберіганням завантажувального пристрою, titleякщо він присутній. data-titleдостатньо, якщо у вас немає титулу, як-от<a href="#" title="xxx">

— davidkonrad

це чудово і просто

— Гаян

Привіт @MattZeunert Я використовував це і працює чудово, але я хочу оновити заголовок відповідно до моїх поданих даних, не перезавантажуючи сторінку та встановлюючи динамічно, я маю на увазі зміну вмісту всередині заголовка.

— 3 правила

32

Ще одне рішення, щоб не вставляти HTML у заголовок даних, - це створити незалежний div із вмістом html-підказки та звернутися до цього діву під час створення підказки:

<!-- 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-вміст та активувати стільки підказок, скільки вам потрібно.

жива демонстрація тут на codepen

— міглі
джерело

Фантастичний. Я радий, що хтось запропонував рішення, яке не натягує HTML безпосередньо у властивість даних.

— Мир

27

Атрибут htmlданих робить саме те, про що говорить, в документах. Спробуйте цей невеликий приклад, не потрібен JavaScript (розбитий на рядки для уточнення):

<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:

— давидконрад
джерело

7

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

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

Живий зразок

— Андрій Ф.
джерело