Bootstrap Popover - how add link in text popover?
HtmlHyperlinkTwitter Bootstrap-3PopoverHtml Problem Overview
I use bootstrap 3 popover.
And now I would like link on text 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:
<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href=" "="">link on content</a>
"
data-original-title="test title"
>
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.
Html Solutions
Solution 1 - Html
You'll need to pass html
option with value true
while initializing popover like following.
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>
Solution 2 - Html
Simply use the attribute data-html="true".
<button
data-toggle="popover"
data-content="Link: <a href='xyz.com'>XYZ</a>"
data-html="true">
CLICK
</button>
Solution 3 - Html
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.
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})
You can reproduce the problem here.
I used the folowing code to fix the issue:
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');
});
}
});
Solution 4 - Html
If you want to use focus and a link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefault
clicks inside a Popup which has the .popover
class
$('body')
.on('mousedown', '.popover', function(e) {
e.preventDefault()
});
});
Solution 5 - Html
<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 :)
Solution 6 - Html
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 client if 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.
Solution 7 - Html
$("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"