Czy mogę używać złożonego kodu HTML z etykietką narzędzia Twitter Bootstrap?

143

Jeśli sprawdzę oficjalną dokumentację , zobaczę właściwość o nazwie 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.

Mówi „wstaw HTML do podpowiedzi”, ale typ jest logiczny. Jak mogę używać złożonego kodu HTML wewnątrz podpowiedzi?

javascript html twitter-bootstrap-3 tooltip sergserg
źródło

Odpowiedzi:

256

Ten parametr dotyczy tylko tego, czy zamierzasz używać złożonego kodu HTML w podpowiedzi. Ustaw go na, truea następnie naciśnij html dotitle atrybut tagu.

Zobacz to skrzypce tutaj - ustawiłem atrybut html na true za pomocą data-html="true"w <a>tagu, a następnie dodałem w html ad hoc jako przykład.

George Wilson
źródło
3
Cóż, ich dokumentacja nie jest tak jasna w tej dziedzinie. Dzięki za udostępnienie tej odpowiedzi! :)
sergserg
3
Dokumentacja bootstrap jest notorycznie bzdurna :) Cieszę się, że mogłem wszystko wyjaśnić!
George Wilson
6
Przykład skrzypiec nie działa dla mnie. Nadal widzę surowy kod HTML.
Sonson123,
3
Prawdopodobnie jakaś zmiana w kodzie Bootstrap, jak podejrzewasz. Zanim wszystkie moje podpowiedzi były podłączone do tytułów html przy użyciu {html: true} w atrybutach funkcji, ale przechodząc od 2.2.2> 2.3.1, musiałem dodać data-html = "true" do moich elementów i po prostu wyrzucić {html: true} część. Naprawdę chciałbym, żeby za pierwszym razem starali się naprawiać rzeczy częściej i nie wprowadzali przełomowych zmian między wydaniami.
Andrew Swihart
1
Zobacz tutaj: jsfiddle.net/44khF/148 . Ponadto wydaje się, że działa tylko z atrybutem data i nie używa html: true w inicjalizacji, jeśli są używane delegaty.
ptutt
34

Jak zwykle, używając data-original-title:

HTML:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

JavaScript:

$("[rel=tooltip]").tooltip({html:true});

Parametr html określa, w jaki sposób tekst podpowiedzi powinien zostać przekształcony w elementy DOM. Domyślnie kod HTML jest chroniony etykietami narzędzi, aby zapobiec atakom XSS. Załóżmy, że wyświetlasz nazwę użytkownika w swojej witrynie i pokazujesz małą biografię w podpowiedzi. Jeśli kod html nie zostanie pominięty, a użytkownik może samodzielnie edytować biografię, może wstrzyknąć złośliwy kod.

Matt Zeunert
źródło
5
data-original-titleto miejsce, w którym bootstrap tymczasowo przechowuje, titlejeśli jest obecny. data-titlewystarczy, jeśli nie masz tytułu, na przykład a<a href="#" title="xxx">
davidkonrad
to wspaniałe i proste
Gayan
Witaj @MattZeunert Użyłem go i działam doskonale, ale chcę zaktualizować tytuł zgodnie z moimi nadchodzącymi danymi bez ponownego ładowania strony i ustawiania dynamicznego, mam na myśli zmianę zawartości w tytule.
3 zasady
32

Kolejne rozwiązanie, aby uniknąć wstawiania html do tytułu-danych jest utworzenie niezależnego elementu div z zawartością html podpowiedzi i odwołanie się do tego elementu div podczas tworzenia podpowiedzi:

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

W ten sposób możesz tworzyć złożone, czytelne treści html i aktywować dowolną liczbę podpowiedzi.

demo na żywo tutaj na codepen

migli
źródło
Fantastyczny. Bardzo się cieszę, że ktoś zaproponował rozwiązanie, które nie wbija kodu HTML bezpośrednio we właściwości data.
Mir,
27

htmlAtrybut danych robi dokładnie to co mówi to robi w docs. Wypróbuj ten mały przykład, bez JavaScript (podzielony na linie dla wyjaśnienia):

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


Prezentacje JSFiddle:

davidkonrad
źródło
7

ustaw opcję "html" na true, jeśli chcesz, aby html był w podpowiedzi. Rzeczywisty html jest określany przez opcję „tytuł” ​​(atrybut tytułu linku nie powinien być ustawiany)

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

Próbka na żywo

Andriy F.
źródło