Link in Bootstrap popover doesn't work

Question

I have a popover with focus-trigger and a link in the 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 sample: JSFiddle

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

I have to support IE9 and reasonably new versions of Firefox. How can I make the link open before the popover closes?

Thanks!

Answer 1

Did you tried this code only in jsfiddle?

If so, this is happening because this kind of virtual ambient works using iframe, which most browsers doesn't allow redirect for security reasons. Removing the 'target' attribute you'll get the following console error:

Load denied by X-Frame-Options: https://www.google.com.br/ does not permit cross-origin framing.

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

Answer 2

Sorry, can't add a comment to your answer matheusrufca, but this doesn't help with IE9 and lower. The popover just dissappears no matter is it of the same origin or not.

Answer 3

I've played a bit with the bootstrap tooltip and one quick and dirty solution would be to remove the close on blur functionality and close it when any element is clicked outside the tooltip.

Here's 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 4

Remove Underscore from target inside tag..It will be working 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 5

Use _blank instead of _top in anchor's target. Then your code should look like:

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

Add an onclick to the link:

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

worked for me. But it doesn't trigger with enter key.

Answer 7

I guess this problem is because you use data-trigger="focus". When you click link in popover, 'focus' is triggered, and then popover closed. At this time, click link event can't be excuted. I sloved this problem by delay hide popover after click popover.

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