Bootstrap Popover - how add link in text popover?
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');
});
}
});
You'll need to pass html
option with value true
while initializing popover like following.
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" target="_blank">test link</a>
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>