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!

Equiprobable

I don't understand why do you want target _top. It doesn't work in Chrome neither. It works as a target _blank, so it is easier to apply such a target and gets the same in any browser. No? – Consentaneous

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

Addia

Answer 2

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>

Ploy

Hey Lanayx Check the solution simply replace _top with top as above – Ploy

CHECK OUT THIS FIDDLE – Ploy

Aditya not sure if there has been a BS change but this does not work (exactly my problem). The link is there but clicking on it does nothing - ie you do not go to Google.com – Judon

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.

Mentor

Answer 4

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.

Unaneled

I updated the Fiddle to use _blank and now IE and Firefox seems to be working. We have implemented this in a customer project, but could you verify before I mark your comment as an answer that will this fix only work in jsfiddle or everwhere? – Enthusiasm

I did a simple html file with your jsfiddle code and works normally in FF and IE, but I tested only in last versions. Here's the code I tested pastebin.com/G5vaYHiA – Unaneled

Changing _top to _blank fixes things for IE11, IE10 and FF35 but unfortunately not for IE9. Do you know a workaround for that? – Enthusiasm

In compatibility mode works normal, i only had to allow popups. – Unaneled

Answer 5

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.

Mailman

The question says that only works on Chrome. I tested the code outside jsfiddle and it works. In IE compatibility mode it works well too. It's very strange a simple link inside a div doesn't open, maybe could be a preventDefault function. – Unaneled

I've just tried IE9 emulation and it doesn't work there. In IE10 mode link works fine. As soon as I have to support IE9 like MathiasR has, I voted this question. – Mailman

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.

Bulahbulawayo

Answer 7

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>

Tremml