wake-up-neo.net

Bootstrap Popover - Wie füge ich einen Link in einem Text-Popover hinzu?

Ich benutze Bootstrap 3 Popover.

Und jetzt möchte ich einen Link auf Pop-Pop-Text.

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 dieses Problem im Symbol ", aber ich weiß nicht, dass ein Link in einem Link hinzugefügt wird ...

Sag mir bitte, wie wird der richtige Code sein?

P.S .: Falls eine Frage bereits existiert, bitte Link angeben.  

46
user2881809

Sie müssen die Option html mit dem Wert true übergeben, während Sie das Popover wie folgt initialisieren.

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">test link</a>
79
nik

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

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>
33
netAction

Ich habe data-trigger="focus" verwendet und hatte ein Problem mit einem Link im Popover-Inhalt. Wenn Sie mit der Maustaste auf den Link klicken und eine Weile gedrückt halten, wird der Popover ausgeblendet und der Link funktioniert nicht. Einige Kunden haben sich darüber beschwert .. Sie können das Problem reproduzieren hier .

Ich habe das folgende code verwendet, um das Problem zu beheben:

data-trigger="manual" in 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');
            });
        }
    });
4
Daniil Grankin
<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 Link-Attribut gearbeitet :)

1
user7961627

Es ist erwähnenswert, dass die Antworten zwar korrekt sind - ein Link führt zu Problemen, wenn der data-trigger="focus" angewendet wird. Wie ich herausfand von einem Client wenn der Klick bei einem Popover schnell erfolgt, wird der Link ausgeführt. Sollte ein Benutzer seine Maustaste gedrückt halten, tritt der Trigger leider ein und der Popover tritt auf. Überlegen Sie sich also kurz, ob ein Link erforderlich ist, und planen Sie langsame Klicks.

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

tut es für mich: Nimm die Sache im Grunde selbst in die Hand. Auch dies ist mit Popover-Optionen html: true, sanitize: false, und trigger : "focus"

0
David

Wenn Sie den Fokus und Link innerhalb des Popup-Fensters verwenden möchten, müssen Sie verhindern, dass das Popup-Fenster geschlossen wird, wenn Sie auf das Innere klicken. Die sauberste Lösung, die ich gefunden habe, war, preventDefault in ein Popup zu klicken, das die .popover-Klasse hat

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