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

Question

我使用Bootstrap 3弹出框。

现在我想在文本弹出框上添加链接。

代码：

<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

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

请告诉我正确的代码是什么？

附言：如果问题已经存在，请给我链接。

- user2881809

Answer 1

在初始化弹出框时，您需要传递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" target="_blank"
>
  test link
</a>

- Nikhil N

---

这个功能可以使用，但与“下次单击时取消”（即属性data-trigger="focus"）不兼容。 - Wouter

单引号（'）在数据内容中很重要吗？ - Naveen DA

是的，我想是这样。 - Nikhil N

我为下面的“下次点击时解除”情况提供了解决方法。 - Daniil Grankin

Answer 2

仅需使用属性data-html="true"即可。

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

- netAction

---

如何在<a href="#" role="button">中添加链接？ - Sanshayan

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');
                });
            }
        });

- Daniil Grankin

---

你用这个救了我！谢谢！ - skybondsor

Answer 4

如果您想在弹出窗口中使用焦点和链接，您需要防止单击内部时关闭弹出窗口。我发现最干净的解决方案是阻止具有.popover类或任何其他自定义类的弹出窗口内部的单击事件默认行为。

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

- Tim S

---

您还可以简单地向弹出窗口添加短延迟。请参见https://stackoverflow.com/a/31497464/1376661 - Andy Beverley

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"，就可以与链接属性一起使用 :)

- user7961627

Answer 6

值得注意的是，虽然给出的答案是正确的 - 当应用data-trigger="focus"时，链接会导致问题。正如我从客户那里了解到的，如果在弹出窗口上快速点击，链接将被执行，如果用户按住鼠标按钮，则触发器会启动并弹出弹出窗口。因此，请考虑是否需要链接，并计划慢速点击。

- Antony

Answer 7

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

对我来说可以这样做：基本上，自己动手解决。同样，这是使用弹出选项 html: true、sanitize: false 和 trigger : "focus"。

- David