Popover Manual Close on Outside Click: Not Working in Safari

Question

JSFiddle: http://jsfiddle.net/L4tjpsbn/

I have a Bootstrap Popup implemented with the Manual mode in order to allow closing anywhere on the outside (outside-click close).

It works everywhere except Safari. In Safari, on a Mac laptop, once the popover is open, I can't close it with an outside click. I can only close it by clicking on the source button again.

Any thoughts?

// Initialize Button popover, whose contents comes from a DIV
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Button popover: dismiss on (1) Outside click as well as (2) next Button click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

Answer 1

You have to change a little your markup as the documentation says here, you can search 'Specific markup required for dismiss-on-next-click' and there you will find the information, basically you have to change <button> for <a> and you also must include the role="button" and tabindex attributes.

This is my example, tested on Safari: http://jsfiddle.net/checosele/e3xtvq2y/

// Initialize Delegator Info Button popover (may not be applicable)
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Delegator Info Button popover: dismiss on focus events as well as next source-icon click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

And this is the html:

<a role="button" id="delegatorInfoButton" type="button" class="btn btn-primary elo" data-toggle="popover" data-placement="right" tabindex="0">
  Open Popover
</a>

<!-- Delegator Info Button Content Panel: Initially empty, will be populated after Ajax fetch upon selection -->
<div id="delegatorInfoButtonPanel" style="display: none">
  CONTENT HERE
</div>