Bootstrap Popover - how to add a link to popover text?

Question

I am using Boosttrap 3 Popover.

And now I would like a link to a text popover.

The 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 run the code in HTML, I see:

 <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 this problem in the symbol " but I don’t know, add the link to the link ...

Please tell me how will the correct code be?

PS: if the question already exists, please give me a link.

Answer 1

You need to pass the html option with true when initializing the popover, as shown below.

Demo

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

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

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

Answer 3

I used data-trigger="focus" and had a problem with the link in the popover content. If you click on the link and hold for a while, the pop-up window disappears and the link "does not work". Some customers complained about this. You can reproduce the problem here .

I used the following code to solve the problem:

data-trigger="manual" in html and

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

Just adding data-html = "true" works with the link :)

Answer 5

If you want to use focus and link inside the popup, you need to prevent the popup from closing when clicked inside. The cleanest solution I found was to preventDefault clicks on preventDefault in the .popover popup .popover class

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

Answer 6

It is worth noting that although the answers given are correct, when using data-trigger="focus" link will cause problems. As I learned from the client, if a click occurs quickly in a pop-up window, the link will work if the user holds the mouse button, then, unfortunately, the trigger fires and a pop-up window appears. So, briefly, consider whether you need a link, and plan for lazy clicks.

Answer 7

 $("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 the html: true , sanitize: false and trigger: "focus" popover options