Posso usare HTML complessi con la descrizione comando di Bootstrap di Twitter?

143

Se controllo la documentazione ufficiale , 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.

Dice "inserisci html nella descrizione comando", ma il tipo è booleano. Come posso usare HTML complesso all'interno di una descrizione comando?

— sergserg
fonte

256

Questo parametro è solo se si intende utilizzare html complessi nella descrizione comandi. Impostalo su truee quindi premi l'html titlenell'attributo del tag.

Vedi questo violino qui : ho impostato l'attributo html su true attraverso data-html="true"il <a>tag nel e poi ho appena aggiunto l'html ad hoc come esempio.

— George Wilson
fonte

3

Beh, la loro documentazione non è così chiara su quell'area. Grazie per aver condiviso questa risposta! :)

— sergserg

3

La documentazione del bootstrap è notoriamente spazzatura :) Sono contento di aver chiarito le cose!

— George Wilson,

6

L'esempio del violino non funziona per me. Vedo ancora il codice HTML non elaborato.

— Sonson123,

3

Probabilmente qualche modifica al codice Bootstrap come sospetti. Prima di avere tutti i miei tooltip cablati per i titoli html usando {html: true} negli attributi della funzione, ma andando da 2.2.2> 2.3.1, dovevo aggiungere data-html = "true" ai miei elementi e ho semplicemente eliminato {html: true} parte. Vorrei davvero che provassero a sistemare le cose più spesso la prima volta e non infliggessero continue modifiche tra le versioni.

— Andrew Swihart,

1

Vedi qui: jsfiddle.net/44khF/148 . Inoltre, sembra funzionare solo con l'attributo data e non usando html: true nell'inizializzazione se vengono utilizzati i delegati.

— ptutt,

34

Altrettanto normale, usando data-original-title:

html:

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

Javascript:

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

Il parametro html consente di specificare come trasformare il testo della descrizione comandi in elementi DOM. Per impostazione predefinita, il codice HTML viene evitato nelle descrizioni dei comandi per prevenire attacchi XSS. Supponi di visualizzare un nome utente sul tuo sito e di mostrare una piccola biografia in una descrizione comandi. Se il codice html non viene salvato e l'utente può modificare la biografia da solo, può iniettare codice dannoso.

— Matt Zeunert
fonte

5

data-original-titleè dove bootstrap memorizza temporaneamente titlese è presente. data-titleè sufficiente se non hai un titolo, come un<a href="#" title="xxx">

— davidkonrad il

è fantastico e semplice

— Gayan,

Ciao @MattZeunert L'ho usato e funziona perfettamente ma voglio aggiornare il titolo secondo i miei dati in arrivo senza ricaricare la pagina e impostarlo dinamicamente, intendo cambiare il contenuto all'interno del titolo.

— 3 regole

32

Un'altra soluzione per evitare di inserire html in data-title è quella di creare div indipendenti con contenuto html tooltip e fare riferimento 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 puoi creare contenuti html complessi e leggibili e attivare tutte le descrizioni dei comandi che desideri.

demo live qui su codepen

— Migli
fonte

Fantastico. Sono così felice che qualcuno abbia proposto una soluzione che non sta stipando l'HTML direttamente nella proprietà dei dati.

— Mir,

27

L' htmlattributo data fa esattamente quello che dice di fare nei documenti. Prova questo piccolo esempio, non è necessario JavaScript (suddiviso in righe per chiarimenti):

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

— davidkonrad
fonte

7

impostare l'opzione "html" su true se si desidera inserire html in tooltip. Il codice HTML effettivo è determinato dall'opzione "titolo" (l'attributo titolo del collegamento non deve essere impostato)

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

Campione live

— Andriy F.
fonte