it-swarm.com.de

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

Wenn ich offizielle Dokumentation ankreuze, sehe ich eine Eigenschaft namens 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.

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

137
sergserg

Dieser Parameter gibt nur an, ob Sie komplexes HTML in der QuickInfo verwenden möchten. Setzen Sie es auf true und tippen Sie den HTML-Code in das Attribut title des Tags.

Siehe diese Geige hier - Ich habe das html-Attribut durch das data-html="true" Im <a> - Tag auf true gesetzt und dann nur als Beispiel im html ad hoc hinzugefügt .

245
George Wilson

Wie gewohnt 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 bösartigen Code einschleusen.

34
Matt Zeunert

Eine andere Lösung, um das Einfügen von HTML in Datentitel zu vermeiden, besteht darin, ein unabhängiges Div mit HTML-Inhalten für QuickInfos zu erstellen und beim Erstellen Ihres QuickInfos auf dieses Div zu verweisen:

<!-- 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 beliebig viele QuickInfos aktivieren.

live-Demo hier auf Codepen

28
migli

Das Datenattribut html macht genau das, was es in den Dokumenten angibt. Probieren Sie dieses kleine Beispiel aus, 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:

25
davidkonrad

setzen Sie die Option "html" auf "true", wenn HTML in die QuickInfo eingefügt werden soll. Tatsächliches HTML wird durch die Option "title" bestimmt (das title-Attribut des Links sollte nicht gesetzt sein)

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

Live sample

7
Andriy F.