Posso utilizzare un HTML complesso con la descrizione comando di Twitter Bootstrap?

Question

Se controllo official documentation, posso vedere una proprietà chiamata 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. 

Si dice, "inserire html all'interno del tooltip", ma il tipo è booleano. Come posso usare un html complesso all'interno di un tooltip?

Answer 1

Questo parametro indica se si intende utilizzare html complessi nel suggerimento. Impostalo su true e quindi inserisci l'html nell'attributo title del tag.

Vai a questa violino here - ho impostato l'attributo html su true attraverso il data-html="true" nel tag <a> e poi appena aggiunto nel codice HTML ad hoc, come esempio.

Answer 2

Proprio come normale, utilizzando data-original-title:

Html:

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

Javascript:

parametro

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

il codice HTML specifica come il testo della descrizione comandi deve essere trasformato in elementi DOM. Per impostazione predefinita, il codice HTML è sfuggito in tooltip per prevenire attacchi XSS. Supponiamo che tu mostri un nome utente sul tuo sito e mostri una piccola biografia in un suggerimento. Se il codice html non è sfuggito e l'utente può modificare autonomamente la bio, potrebbe iniettare codice dannoso.

Answer 3

imposta l'opzione "html" su true se si desidera avere html in tooltip. html effettiva è determinata dalla opzione "titolo" (attributo title del link non deve essere impostato)

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

Live sample

Answer 4

L'attributo dati html fa esattamente quello che dice lo fa nella documentazione. Prova questo piccolo esempio, javascript nessecary (breaked in linee di chiarimento):

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

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

Answer 5

Un'altra soluzione per evitare l'inserimento di html all'interno dati-titolo è creare div indipendente con il contenuto tooltip html, e si riferiscono a questo div quando si crea il tooltip:

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

In questo modo è possibile creare complessi contenuto html leggibile e attiva tutte le descrizioni dei comandi che desideri.

demo live here on codepen