Show popover on button click using jquery

Question

I am trying to display notification message by using popover, it is working but after loading a page if i click button first time it doesn't show the popover after that it works fine here is my code-

<button type="button" id="bulk_actions_btn" class="btn btn-default has-spinner-two" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="Click any question mark icon to get help and tips with specific tasks"> Apply </button>

Jquery

$(document).on('click','#bulk_actions_btn',function(){

   if(condition){
        $('[data-toggle="popover"]').popover(); //here if the condition is true then popover should be display.
    }else{
       //ajax 
    }
});

Answer 1

You should take a look to popovers methods:

In order to show the popover you need to use:

$('#element').popover('show');

Instead to use:

$('[data-toggle="popover"]')

selector I suggest you to address directly your element.

$('#bulk_actions_btn_new')  or $(this)

If you want to use the data attribute for selecting elements you need to use the filter function.

In order to avoid flickering effects you can show the popover only if it is hidden. If you click too fast on the button you can avoid to hide the popover handling the hide.bs.popover event.

The snippet:

$(document).on('click', '#bulk_actions_btn', function (e) {
    //
    // If popover is visible: do nothing
    //
    if ($(this).prop('popShown') == undefined) {
       $(this).prop('popShown', true).popover('show');
    }
});

$(function () {
    $('#bulk_actions_btn').on('hide.bs.popover', function (e) {
        //
        // on hiding popover stop action
        //
        e.preventDefault();
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<button type="button" id="bulk_actions_btn"
        class="btn btn-default has-spinner-two"
        data-toggle="popover"
        data-placement="bottom" data-original-title=""
        data-content="Click any question mark icon to get help and tips with specific tasks"
        aria-describedby="popover335446"> Apply
</button>