Bootstrap Popover - 如何在文本popover中添加链接？

Question

我使用bootstrap 3 popover.

现在我想链接文本popvover.

码:

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

但是当我在html中启动代码时,我看到:

<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

我知道符号中的问题,"但我不知道在链接中添加链接...

请告诉我,如何正确的代码？

PS:如果问题已经存在,请给我链接.

Answer 1

你需要在初始化popover时传递html带有值的选项,true如下所示.

演示

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>

Answer 2

只需使用属性data-html ="true"即可.

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

Answer 3

我使用data-trigger="focus"并遇到了 popover 内容中的链接问题。如果在链接上单击鼠标按钮并按住一段时间，则弹出窗口将消失并且链接“不起作用”。一些客户对此有所抱怨。

HTML

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

JS

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

您可以在此处重现该问题。

我使用以下代码来解决问题：

data-trigger="manual" 在 html 和

$("[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');
            });
        }
    });

Answer 4

如果您想在弹出窗口内使用焦点和链接，您需要在单击内部时防止弹出窗口关闭。我发现的最干净的解决方案是preventDefault在具有.popover类的弹出窗口中单击

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