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

Bootstrap Popover - how add link in text popover?

提问by nik

I use bootstrap 3 popover.

我使用引导程序 3 弹出窗口。

And now I would like link on text popvover.

现在我想要文本 popvover 上的链接。

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>

But when I start code in html I see:

但是当我在 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

I know that problem in symbol "but i don't know have add link in link...

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

Tell me please how will be aright code?

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

P.S.: if question already exist please give me link.

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

回答by nik

You'll need to pass htmloption with value truewhile initializing popover like following.

您需要在初始化弹出窗口时传递html带有值的选项，true如下所示。

Demo

演示

JS:

JS：

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

HTML:

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>

回答by netAction

Simply use the attribute data-html="true".

只需使用属性data-html="true"。

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

回答by Daniil Grankin

I used data-trigger="focus"and had an issue with a link in content of popover. If mouse button is clicked on the link and hold for a while then the popover disappears and the link 'doesn't work'. Some clients complained about that.

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

HTML

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

JS

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

You can reproduce the problem here.

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

I used the folowing codeto fix the issue:

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

data-trigger="manual"in html and

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

回答by Tim S

If you want to use focus anda link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefaultclicks inside a Popup which has the .popoverclass

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

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

回答by user7961627

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

By simply adding data-html="true" is working with link attribute :)

通过简单地添加 data-html="true" 使用链接属性:)

回答by Antony

Its worth noting that whilst the answers given are correct - a link will cause problems when the data-trigger="focus"is applied. As I found out from a clientif the click occurs quickly on a popover the link will be actioned, should a user hold down their mousebutton then unfortunately the trigger kicks in and the popover occurs. So in short consider whether a link is necessary and plan for slooow clicks.

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

回答by David

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

does it for me: basically, take matters into your own hands. Again, this is with popover options html: true, sanitize: false, and trigger : "focus"

为我做：基本上，把事情掌握在自己手中。再次，这是酥料饼的选项html: true，sanitize: false以及trigger : "focus"