Ich versuche, HTML in einem Bootstrap-Popover anzuzeigen, aber irgendwie funktioniert es nicht. Ich habe hier einige Antworten gefunden, aber es wird bei mir nicht funktionieren. Bitte lassen Sie mich wissen, wenn ich etwas falsch mache.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
html
twitter-bootstrap
popover
Adrian Mojica
quelle
quelle
Antworten:
Sie können es nicht verwenden,
<li href="#"
da es dazu gehört.<a href="#"
Deshalb hat es nicht funktioniert. Ändern Sie es und es ist alles gut.Hier arbeitet JSFiddle, das Ihnen zeigt, wie Sie ein Bootstrap-Popover erstellen.
Relevante Teile des Codes sind unten:
HTML:
JavaScript:
$("[data-toggle=popover]").popover();
Übrigens müssen Sie immer mindestens das Popover aktivieren. Aber anstelle von könnendata-toggle="popover"
Sie auchid="my-popover"
oder verwendenclass="my-popover"
. Denken Sie daran, sie zu aktivieren, indem Sie z. B.:$("#my-popover").popover();
In diesen Fällen verwenden.Hier ist der Link zur vollständigen Spezifikation: Bootstrap Popover
Bonus:
Wenn Sie aus irgendeinem Grund den Inhalt eines Popups aus den Tags
data-toggle
und nicht mögen oder nicht lesen könnentitle
. Sie können auch zB versteckte Divs und etwas mehr JavaScript verwenden. Hier ist ein Beispiel dafür .quelle
Sie können Attribut verwenden
data-html="true"
:quelle
Eine andere Möglichkeit, den Popover-Inhalt wiederverwendbar anzugeben, besteht darin, ein neues Datenattribut wie folgt zu erstellen
data-popover-content
und wie folgt zu verwenden:HTML:
JS:
Dies kann nützlich sein, wenn Sie viel HTML in Ihre Popover einfügen müssen.
Hier ist ein Beispiel für eine Geige: http://jsfiddle.net/z824fn6b/
quelle
Sie müssen eine Popover-Instanz erstellen, für die die HTML-Option aktiviert ist (fügen Sie diese nach dem Popover-JS-Code in Ihre Javascript-Datei ein):
$('.popover-with-html').popover({ html : true });
quelle
Ich habe ein Pop-Over in einer Liste verwendet. Ich gebe ein Beispiel über HTML
quelle
Sie müssen nur
data-html="true"
das Link-Popover eingeben. Wird funktionieren.quelle
Dies ist eine leichte Modifikation von Jacks ausgezeichneter Antwort .
Im Folgenden wird sichergestellt, dass einfache Popovers ohne HTML-Inhalt nicht betroffen sind.
JavaScript:
quelle
Ich hasse es wirklich, langen HTML-Code in das Attribut einzufügen. Hier ist meine Lösung, klar und einfach (ersetzen? Durch was auch immer Sie wollen):
dann
quelle
Dies ist eine alte Frage, aber dies ist eine andere Möglichkeit, jQuery zu verwenden, um das Popover wiederzuverwenden und weiterhin die ursprünglichen Bootstrap-Datenattribute zu verwenden, um es semantischer zu gestalten:
Der Link
Benutzerdefinierter Inhalt zum Anzeigen
Javascript
Geige mit vollständigem Beispiel: http://jsfiddle.net/tomsarduy/262w45L5/
quelle
Sie können die 'template / popover / popover.html' in der Datei 'ui-bootstrap-tpls-0.11.0.js' ändern. Schreiben Sie: "bind-html-unsafe" anstelle von "ng-bind".
Es wird alles Popover mit HTML angezeigt. * Es ist unsicher HTML. Nur verwenden, wenn Sie dem HTML-Code vertrauen.
quelle
Sie können das Popover-Ereignis verwenden und die Breite über das Attribut 'Datenbreite' steuern.
quelle
Fügen Sie dies am Ende Ihrer popper.js-Datei hinzu:
Quelle: https://github.com/twbs/bootstrap/issues/23590
quelle