How to fire/show popover on span tag?

Question

I have a span tag as below and need some suggestions to show a popover. With the following code snippet, the popover is not showing for enter key / space bar, whereas it is working fine for mouse click. Any suggestions to popover using enter key for the span tag would be helpful and appreciated.

<span role="button" aria-pressed="false" tabindex="0" id="btnPopover" class="btn btn-primary" title="popover button" data-content="This is span popover" data-trigger="click" data-toggle="popover">Span Popover</span>

$(function() {
        $(document).popover({
            selector: '[data-toggle=popover]',
            trigger: 'click',
            container: 'body'
        }); 

        $('#btnPopover').keydown(function(){
            $(document).popover({
                selector: '[data-toggle=popover]',
                trigger: 'click',
                container: 'body'
            });             
        }); 

});

I tried with the options mentioned in the above code.

When I use mouse click, the popover displayed as expected, but it is not working for enter key or space bar.

When I tried various options, it was always working for mouse clicks, but not for space bar / enter key.

Answer 1

if i use data-trigger='focus', then i am able to show / fire a popover for span tag while using tab to focus that popover element (span tag). Thanks!