Могу ли я использовать сложный 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 внутри подсказки?

javascript html twitter-bootstrap-3 tooltip sergserg
источник

Ответы:

256

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

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

Джордж Уилсон
источник
3
Ну, их документация не так ясна в этой области. Спасибо, что поделились этим ответом! :)
sergserg
3
Документация по самозагрузке - общеизвестная ерунда :) Рад, что смог разобраться!
Джордж Уилсон
6
Пример скрипки не работает для меня. Я все еще вижу сырой код HTML.
Sonson123
3
Возможно, некоторые изменения в коде Bootstrap, как вы подозреваете. Прежде чем все мои всплывающие подсказки были связаны с заголовками html с использованием {html: true} в атрибутах функции, но из 2.2.2> 2.3.1 мне пришлось добавить data-html = "true" к моим элементам и просто удалить {html: true} часть. Мне бы очень хотелось, чтобы в первый раз они постарались сделать все правильно и не причинять постоянных изменений между релизами.
Эндрю Свихарт
1
Смотрите здесь: jsfiddle.net/44khF/148 . Кроме того, кажется, что он работает только с атрибутом data и не использует 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 и ссылаться на этот 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-контент и активировать столько подсказок, сколько хотите.

живое демо здесь на codepen

migli
источник
Фантастика. Я так рад, что кто-то предложил решение, которое не втиснуло 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:

davidkonrad
источник
7

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

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

Живой образец

Андрей Федорович
источник