Bootstrap Popover – wie füge ich einen Link im Text-Popover hinzu?

Ich verwende Bootstrap 3 Popover.

Und jetzt hätte ich gerne einen Link auf Text Popvover.

Code:

<a href="#" 
  role="button" 
  class="btn popovers" 
  data-toggle="popover" 
  title="" 
  data-content="test content <a href="" title="test add link">link on content</a>" 
  data-original-title="test title"
  >
  test link
</a>

Aber wenn ich Code in HTML starte, sehe ich:

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content &lt;a href=" "="">link on content</a>
" 
data-original-title="test title"
&gt;
test link

Ich kenne das Problem in Symbol " aber ich weiß nicht, ob ich einen Link im Link hinzugefügt habe …

Sag mir bitte, wie wird der richtige Code sein?

PS: Wenn die Frage bereits besteht, geben Sie mir bitte einen Link.

Sie müssen bestehen html Option mit Wert true beim Initialisieren von Popover wie folgt.

Demo

JS:

$("[data-toggle=popover]")
  .popover({html:true})

HTML:

<a
  href="#" role="button" class="btn popovers" data-toggle="popover" title=""
  data-content="test content <a href="" title="test add link">link on content</a>"
  data-original-title="test title" target="_blank"
>
  test link
</a>

Verwenden Sie einfach das Attribut data-html=”true”.

<button
  data-toggle="popover"
  data-content="Link: <a href="https://stackoverflow.com/questions/20299246/xyz.com">XYZ</a>"
  data-html="true">
  CLICK
</button>

<a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href="https://stackoverflow.com/" title="test add link">link on content</a>" data-original-title="test title">test link</a>

$("[data-toggle=popover]").popover({html:true})

Sie können das Problem reproduzieren Hier.

Ich habe folgendes verwendet Code um das Problem zu beheben:

data-trigger="manual" im html- und

$("[data-toggle=popover]")
    .popover({ html: true})
        .on("focus", function () {
            $(this).popover("show");
        }).on("focusout", function () {
            var _this = this;
            if (!$(".popover:hover").length) {
                $(this).popover("hide");
            }
            else {
                $('.popover').mouseleave(function() {
                    $(_this).popover("hide");
                    $(this).off('mouseleave');
                });
            }
        });

Wenn Sie den Fokus verwenden möchten Und einen Link innerhalb des Popups, den Sie benötigen, um zu verhindern, dass das Popup geschlossen wird, wenn Sie hineinklicken. Die sauberste Lösung, die ich gefunden habe, war zu preventDefault klickt in ein Popup, das die hat .popover Klasse oder jede andere benutzerdefinierte Klasse, die Sie definieren.

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });

<a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href="" title="test add link">link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Durch einfaches Hinzufügen von data-html=”true” wird mit dem Linkattribut gearbeitet 🙂

Es ist erwähnenswert, dass, obwohl die gegebenen Antworten korrekt sind, ein Link Probleme verursacht, wenn die data-trigger="focus" wird angewandt. Wie ich herausfand von einem Kunden Wenn der Klick schnell auf ein Popover erfolgt, wird der Link ausgeführt. Sollte ein Benutzer seine Maustaste gedrückt halten, tritt leider der Trigger ein und das Popover tritt auf. Überlegen Sie also kurz, ob ein Link notwendig ist, und planen Sie langsame Klicks ein.

$("body").on("mousedown",".my-popover-content a",function(e){
    document.location = e.target.href;
});

tut es für mich: Im Grunde nehmen Sie die Dinge selbst in die Hand. Auch dies ist mit Popover-Optionen möglich html: true, sanitize: falseUnd trigger : "focus"