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

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?

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.

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.

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

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:

• Bootstrap 2.x.
• Bootstrap 3.x.

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