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

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

请告诉我，如何成为正确的代码？

P.S。：如果问题已经存在，请给我链接。

Answer 1

在初始化popover时，您需要传递值html的{{1}}选项。

Demo

<强> JS：

true

<强> HTML：

$("[data-toggle=popover]")
.popover({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"并且在popover的内容中遇到了链接问题。如果在链接上单击鼠标按钮并保持一段时间，则弹出窗口消失，链接“无法正常工作”。一些客户抱怨这一点。您可以重现问题here。

我使用下面的code来解决问题：

html和

中的

data-trigger="manual"

$("[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

<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 =＆＃34; true＆＃34;正在使用链接属性：）

Answer 5

值得注意的是，尽管给出的答案是正确的 - 当应用data-trigger="focus"时，链接会导致问题。当我从客户端发现如果在弹出窗口上快速发生点击时，链接将被操作，如果用户按住他们的鼠标按钮，那么不幸的是触发器启动并且弹出窗口发生。因此，简而言之，请考虑是否需要链接并计划单击次数。

Answer 6

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

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

Answer 7

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

为我做这件事：基本上，将事情交到您自己手中。同样，它具有弹出式选项html: true，sanitize: false和trigger : "focus"

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

7 个答案: