Link in Bootstrap popover not working

Question

I have a popover with a focus trigger and a link in a popover.

Html:

<div class="tree"> <div class="html-popup"> Popup text <a href="http://www.google.com" target="_top">Link somewhere</a> </div> <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> Text that has a popover </a> </div> 

JavaScript:

 $('.tree [data-toggle="popover" ]').popover({ html: true, content: function () { return $(this).prev().html(); } }); 

Here is a live example: JSFiddle

In Chrome, the link opens before the popover closes, but in IE and Firefox it just closes the popover.

I need to support IE9 and reasonably new versions of Firefox. How can I open a link before closing the popover?

Thanks!

Answer 1

Remove Underscore from the target internal tag. It will work fine in IE

  <div class="tree"> <div class="html-popup"> Popup text <a href="http://www.google.com" target="top">Link somewhere</a> </div> <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> Text that has a popover</a> </div> 

Answer 2

I played around a bit with the bootstrap tooltip, and one quick and dirty solution would be to remove the blur closing function and close it when any item is pressed outside the tooltip.

Here is a quick example: https://jsfiddle.net/b8hjg5x9/ .

 $('.tree [data-toggle="popover"]').popover({ html: true, content: function () { return $(".html-popup").html(); } }).on('show.bs.popover', function() { $('[data-toggle="popover"]').popover('hide'); }); $('html').on('click', function (e) { if ($(e.target).data('toggle') !== 'popover') { $('[data-toggle="popover"]').popover('hide'); } }); 

Hope this helps.

Answer 3

Add the onclick link to the link:

 <a href="#" onclick="window.open('http://www.google.com/');\"> link </a> 

worked for me. But the enter key does not start.

Answer 4

Have you tried this code only in jsfiddle ?

If so, this is because this kind of virtual environment works using an iframe, which most browsers do not allow redirection for security reasons. When you remove the target attribute, you get the following console error:

Download forbidden using X-Frame-Options: https://www.google.com.br/ do not allow cross-framework.

If you work inside an iframe, a good option is to change to target="_blank" , otherwise it should work.

Answer 5

Sorry, I can not add a comment to your matheusrufca answer, but this does not help with IE9 and below. Popover simply disappears, regardless of whether it has the same origin or not.

Answer 6

Answer BebliucGeorge. This works for a simple case, but for 2 or more prompts it introduces a new error - the popover will not close if I click on another switch.

 Example: 

https://jsfiddle.net/vc7zn1o6/29/

Answer 7

Use _blank instead of _top in the target binding. Then your code should look like this:

  <div class="tree"> <div class="html-popup"> Popup text <a href="http://www.google.com" target="_blank">Link somewhere</a> </div> <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> Text that has a popover </a> </div> 

Answer 8

I assume this problem is because you are using data-trigger="focus" . When you click on a link in a popover, "focus" starts and then closes. At this time, the click link event cannot be excluded. I moved this problem by delaying hide popover after clicking on click.

Example: $('[data-toggle=popover]').popover({ delay: { hide: 200 } });