Bootstrap Popover - 如何在文本弹出窗口中添加链接？

Answer 1

您需要在初始化弹出窗口时传递具有值

html

的

true

选项，如下所示。

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"

并且弹出窗口内容中的链接有问题。如果在链接上单击鼠标按钮并按住一段时间，则弹出窗口会消失并且链接“不起作用”。一些客户对此表示抱怨。

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

如果你想使用焦点 and 弹出窗口内的链接，你需要防止弹出窗口在点击内部时关闭。我找到的最干净的解决方案是在具有

preventDefault

类

的Popup中

.popover

点击

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

Answer 5

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

只需添加 data-html="true" 即可使用链接属性 :)

Answer 6

值得注意的是，虽然给出的答案是正确的 - 当应用

data-trigger="focus"

时，链接会导致问题。正如我从客户发现如果在弹出窗口上快速发生单击，链接将被操作，如果用户按住他们的鼠标按钮然后不幸的是触发器启动并出现弹出窗口。因此，简而言之，请考虑是否需要链接并计划点击次数。

Answer 7

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

对我有用：基本上，把事情掌握在自己手中。同样，这是带有弹出选项

html: true

、

sanitize: false

和

trigger : "focus"