Kann ich mit dem Tooltip von Twitter Bootstrap komplexes HTML verwenden?

143

Wenn ich die offizielle Dokumentation überprüfe , wird eine Eigenschaft namens HTML angezeigt:

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.

Es heißt "HTML in den Tooltip einfügen", aber der Typ ist boolesch. Wie kann ich komplexes HTML in einem Tooltip verwenden?

sergserg
quelle

Antworten:

256

Bei diesem Parameter geht es nur darum, ob Sie komplexes HTML in der QuickInfo verwenden möchten. Setzen Sie es auf trueund drücken Sie dann den HTML-Code in das titleAttribut des Tags.

Sehen Sie sich diese Geige hier an - ich habe das HTML-Attribut durch das data-html="true"im <a>Tag auf true gesetzt und es dann einfach als Beispiel im HTML-Ad-hoc- Attribut hinzugefügt.

George Wilson
quelle
3
Nun, ihre Dokumentation ist in diesem Bereich nicht so klar. Vielen Dank für diese Antwort! :)
Serggserg
3
Die Bootstrap-Dokumentation ist notorisch Müll :) Ich bin froh, dass ich die Dinge klären konnte!
George Wilson
6
Das Geigenbeispiel funktioniert bei mir nicht. Ich sehe immer noch den rohen HTML-Code.
Sonson123
3
Wahrscheinlich einige Änderungen am Bootstrap-Code, wie Sie vermuten. Bevor ich alle meine Tooltips für HTML-Titel mit {html: true} in den Funktionsattributen verkabelt hatte, musste ich meinen Elementen data-html = "true" hinzufügen und nur das verschrotten {html: true} Teil. Ich wünschte wirklich, sie würden versuchen, die Dinge beim ersten Mal öfter richtig zu machen und nicht ständig bahnbrechende Änderungen zwischen den Veröffentlichungen zu bewirken.
Andrew Swihart
1
Siehe hier: jsfiddle.net/44khF/148 . Außerdem scheint es nur mit dem Datenattribut zu funktionieren und nicht mit HTML: true bei der Initialisierung, wenn Delegaten verwendet werden.
Ptutt
34

Wie immer mit data-original-title :

Html:

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

Javascript:

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

Der Parameter html gibt an, wie der QuickInfo-Text in DOM-Elemente umgewandelt werden soll. Standardmäßig wird HTML-Code in QuickInfos maskiert, um XSS-Angriffe zu verhindern. Angenommen, Sie zeigen einen Benutzernamen auf Ihrer Website an und Sie zeigen eine kleine Biografie in einem Tooltip. Wenn der HTML-Code nicht maskiert wird und der Benutzer die Biografie selbst bearbeiten kann, kann er schädlichen Code einfügen.

Matt Zeunert
quelle
5
data-original-titleHier wird Bootstrap vorübergehend gespeichert, titlewenn es vorhanden ist. data-titleist genug, wenn Sie keinen Titel haben, wie a<a href="#" title="xxx">
davidkonrad
Das ist großartig und einfach
Gayan
Hallo @MattZeunert Ich habe es verwendet und es läuft einwandfrei, aber ich möchte den Titel gemäß meinen kommenden Daten aktualisieren, ohne die Seite neu zu laden und dynamisch festzulegen. Ich meine, den Inhalt innerhalb des Titels zu ändern.
3 Regeln
32

Eine andere Lösung zu vermeiden , html in das Einfügen Daten-Titel ist unabhängig div erstellen mit Tooltip HTML - Inhalt, und dieser div beziehen , wenn Ihr Tooltip zu erstellen:

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

Auf diese Weise können Sie komplexe lesbare HTML-Inhalte erstellen und so viele QuickInfos aktivieren, wie Sie möchten.

Live-Demo hier auf Codepen

migli
quelle
Fantastisch. Ich bin so froh, dass jemand eine Lösung vorgeschlagen hat, die HTML nicht direkt in die Dateneigenschaft stopft.
Mir
27

Das htmlDatenattribut macht genau das, was es in den Dokumenten sagt. Versuchen Sie dieses kleine Beispiel, kein JavaScript erforderlich (zur Verdeutlichung in Zeilen unterteilt):

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

davidkonrad
quelle
7

Setzen Sie die Option "html" auf "true", wenn Sie HTML in die QuickInfo aufnehmen möchten. Das tatsächliche HTML wird durch die Option "title" bestimmt (das title-Attribut des Links sollte nicht festgelegt werden).

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

Live-Probe

Andriy F.
quelle