Wenn Sie HTML innerhalb des Inhalts verwenden möchten, müssen Sie zunächst die HTML-Option auf true setzen:
$('.danger').popover({ html : true});
Dann haben Sie zwei Möglichkeiten, den Inhalt für ein Popover festzulegen
- Verwenden Sie das Dateninhaltsattribut. Dies ist die Standardoption.
- Verwenden Sie eine benutzerdefinierte JS-Funktion, die den HTML-Inhalt zurückgibt.
Verwenden von Dateninhalten : Sie müssen den HTML-Inhalt wie folgt umgehen:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
Sie können den HTML-Code entweder manuell maskieren oder eine Funktion verwenden. Ich weiß nichts über PHP, aber in Rails verwenden wir * html_safe *.
Verwenden einer JS-Funktion : Wenn Sie dies tun, haben Sie mehrere Möglichkeiten. Ich denke, das Einfachste ist, Ihren div-Inhalt zu verstecken, wo immer Sie wollen, und dann eine Funktion zu schreiben, um seinen Inhalt an Popover zu übergeben. Etwas wie das:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Und dann sieht Ihr HTML so aus:
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
Ich hoffe es hilft!
PS: Ich hatte einige Probleme bei der Verwendung von Popover und beim Nichteinstellen des Titelattributs. Denken Sie also daran, immer den Titel festzulegen.
popover_content_wrapper
, verursacht diese Lösung Probleme, da sie in HTML gerendert wird (ohne Ihre Handler). Die Lösung besteht dann darin, auf das Ereignis "insert.bs.popover" zu warten und Ihren Handler erneut an das neue Element anzuhängen, das sich jetzt im DOM befindet.Aufbauend auf der Antwort von jävi kann dies ohne IDs oder zusätzliche Schaltflächenattribute wie folgt erfolgen:
http://jsfiddle.net/isherwood/E5Ly5/
quelle
Eine weitere alternative Methode, wenn Sie nur das Erscheinungsbild von Pop Over wünschen. Es folgt die Methode. Natürlich ist dies eine manuelle Sache, aber gut praktikabel :)
HTML - Schaltfläche
HTML - Popover
JS
quelle
style="top: 200px; left: 90px;
desbgform
Div. Gibt es eine Möglichkeit, stattdessen den automatischen Platzierungscode von bootstrap aufzurufen? Sie können auch fadeToggle () oder einfach toggle () für verschiedene Effekte im Javascript verwenden.Spät zur Party. Aufbauend auf den anderen Lösungen. Ich brauchte einen Weg, um das Ziel-DIV als Variable zu übergeben . Hier ist was ich getan habe.
HTML für Popover-Quelle (ein Datenattribut Data-Pop wurde hinzugefügt , das den Wert für die Ziel-DIV-ID / oder -Zahl enthält ):
HTML für Popover-Inhalte (ich verwende die Bootstrap-Hide-Klasse):
Skript:
quelle
Neben anderen Antworten. Wenn Sie
html
Optionen zulassen, können Sie einjQuery
Objekt an den Inhalt übergeben. Es wird mit allen Ereignissen und Bindungen an den Inhalt des Popovers angehängt. Hier ist die Logik aus dem Quellcode:html
nicht zulässig ist, werden Inhaltsdaten als Text angewendethtml
zulässig ist und die Inhaltsdaten eine Zeichenfolge sind, werden sie als angewendethtml
quelle
All diesen Antworten fehlt ein sehr wichtiger Aspekt!
Wenn Sie .html oder innerHtml oder OuterHtml verwenden, verwenden Sie das referenzierte Element nicht. Sie verwenden eine Kopie des HTML-Codes des Elements. Dies hat einige schwerwiegende Nachteile.
Sie möchten das Objekt selbst in das Popover laden.
https://jsfiddle.net/shrewmouse/ex6tuzm2/4/
HTML:
JQuery:
quelle
Warum so kompliziert? Einfach gesagt:
quelle
quelle