HTML im Twitter Bootstrap Popover

288

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>
Adrian Mojica
quelle

Antworten:

351

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:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

$("[data-toggle=popover]").popover();Übrigens müssen Sie immer mindestens das Popover aktivieren. Aber anstelle von können data-toggle="popover"Sie auch id="my-popover"oder verwenden class="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-toggleund nicht mögen oder nicht lesen können title. Sie können auch zB versteckte Divs und etwas mehr JavaScript verwenden. Hier ist ein Beispiel dafür .

Mauno Vähä
quelle
1
Entfernen Sie HREF href = "#" auf den ANCHOR-Tag-Elementen, um zu verhindern, dass Sie zum Anfang der Seite scrollen!
Peter_pilgrim
@peter_pilgrim Danke, dass du das gesagt hast. Ich habe meine Antwort aktualisiert, um die neueste Version von Bootstrap zu verwenden, und href = "#" von <a> -Tags entfernt und sie stattdessen wie Schaltflächen verhalten lassen. (Dies ist auch auf der Bootstrap-Site dokumentiert). Dieser Link wurde am Ende meiner Antwort hinzugefügt.
Mauno Vähä
Ich habe ein Problem mit iOS-Geräten gefunden. Das Popover funktioniert mit dem Touchscreen. Haben Sie eine allgemeine Lösung gefunden? Eigentlich denke ich, dass dies auch mit Bootstrap-Popover-Code passiert. Irgendwelche Ideen?
Peter_pilgrim
285

Sie können Attribut verwenden data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
Dennis Münkle
quelle
Gibt es eine Möglichkeit, es in gwtbootstrap3 zu verwenden, funktioniert es in dieser Form nicht. Ich habe die Frage hier gestapelt stackoverflow.com/questions/34142815/… , aber bisher keine Antwort.
ivan_bilan
Ich weiß nicht, warum die obige Antwort als richtig markiert ist. Vielleicht wählen die Leute absichtlich die komplizierteste Option, um ihre Arbeitsplätze zu erhalten.
Stephen
Ich habe dieses Popover am Ende meiner Seite und es funktioniert hervorragend, außer ... Es verschiebt mich ganz zurück zum Anfang der Seite. Ich habe es in einer foreach-Schleife von Bootstrap-Thumbnails gesetzt. Irgendwelche Ideen?
Foxtangocharlie
106

Eine andere Möglichkeit, den Popover-Inhalt wiederverwendbar anzugeben, besteht darin, ein neues Datenattribut wie folgt zu erstellen data-popover-contentund wie folgt zu verwenden:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

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/

Jack
quelle
1
Dieser modulare Ansatz ist sehr elegant. Sie können viele Popovers und nur eine generische Javascript-Funktion haben.
Xtian
1
Das ist großartig, @Jack, danke. Ich liebe es, HTML nicht in Attribute einfügen zu müssen. So unordentlich.
John Washam
Tolle Arbeit hier, liebe die Einfachheit und Benutzerfreundlichkeit
FastTrack
Sie das echte MVP
plushyObject
Es scheint nicht mit Bootstrap 3.4.1 zu funktionieren. Können Sie bitte helfen? @Jack stackoverflow.com/questions/60514533/…
user2513846
84

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 });

Mike Lucid
quelle
22

Ich habe ein Pop-Over in einer Liste verwendet. Ich gebe ein Beispiel über HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
user3319310
quelle
1
einfachster Ansatz durch Verwendung verschiedener Anführungszeichen zum Umschließen des HTML-Codes. Nettes Denken.
Jimmy Ilenloa
Schön, der eigentliche Trick besteht darin, die doppelten Anführungszeichen in einfache Anführungszeichen zu ändern!
Steven Barragán
8

Sie müssen nur data-html="true"das Link-Popover eingeben. Wird funktionieren.

Tiago Piovesan
quelle
6

Dies ist eine leichte Modifikation von Jacks ausgezeichneter Antwort .

Im Folgenden wird sichergestellt, dass einfache Popovers ohne HTML-Inhalt nicht betroffen sind.

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
Marc A.
quelle
4

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

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

dann

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
user1079877
quelle
4

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

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

Benutzerdefinierter Inhalt zum Anzeigen

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Geige mit vollständigem Beispiel: http://jsfiddle.net/tomsarduy/262w45L5/

Tom Sarduy
quelle
2

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.

Guy Biber
quelle
0

Sie können das Popover-Ereignis verwenden und die Breite über das Attribut 'Datenbreite' steuern.

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});
 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>

Vĩnh Phú Ngô
quelle
-1

Fügen Sie dies am Ende Ihrer popper.js-Datei hinzu:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Quelle: https://github.com/twbs/bootstrap/issues/23590

Stef Van Looveren
quelle