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

Question

Gdybym sprawdzić official documentation widzę 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. 

on mówi, „wstawić kod HTML na podpowiedzi”, ale ten typ jest logiczna. Jak mogę korzystać ze skomplikowanego html w narzędziu Tooltip?

Answer 1

Ten parametr dotyczy tylko tego, czy zamierzasz używać złożonego html w etykiecie narzędzi. Ustaw go na true, a następnie użyj html w atrybucie tagu title.

Zobacz ten skrzypce here - mam ustawić atrybut HTML true przez data-html="true" w tagu <a> a potem po prostu dodane w html ad hoc jako przykład.

Answer 2

Podobnie jak normalne, używając data-original-title:

HTML:

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

Javascript:

parametr

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

HTML określa, w jaki sposób tekst podpowiedzi powinny być włączone do elementów DOM. Domyślnie kod Html jest ujęty w etykietkach narzędzi, aby zapobiec atakom XSS. Powiedz, że wyświetlasz nazwę użytkownika na swojej stronie i pokazujesz małą etykietkę w podpowiedzi. Jeśli kod html nie zostanie zmieniony, a użytkownik może sam edytować bio, może wstrzyknąć złośliwy kod.

Answer 3

Ustaw opcję "html" na wartość true, jeśli chcesz mieć html do etykiety narzędzi. Rzeczywista html jest określana przez opcję „Title” (atrybut Tytuł linku nie powinno być ustawione)

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

Live sample

Answer 4

danych atrybutu html robi dokładnie to co mówi to robi w docs. Spróbuj ten mały przykład, nie javascript nessecary (breaked do linii 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> 

jsfiddle demonstracyjnych ->bootstrap 2.x | bootstrap 3.x

Answer 5

Innym rozwiązaniem, aby uniknąć wstawiania HTML do danych-tytule jest stworzenie independant div z treścią podpowiedzi html, oraz zapoznać się ten dział podczas tworzenia podpowiedź:

<!-- 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żna tworzyć kompleks czytelne treści HTML i aktywuj dowolną liczbę podpowiedzi.

Demo na żywo here on codepen