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

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 } });