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

Solution 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>

Solution 2

Just check your condition inside

$(document).ready(function(){
     //Your condition here 
});


    
                

Solution 3

you need to enable popover before it can be used. They are not enabled by default. So when you call popover() method, you are actually initializing the popover. You do that on click event and hence it doesnt work for the first time. You should do that when document.ready is triggered like so -

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

This will enable all bootstrap popovers in your code

Comments

[melvin]

What does if(condition) check ? because it can be 2 things 1) your dom is not fully loaded yet so first click does not work 2) your condition is false the first time and the else part of your code changes your condition so for the second click your condition returns true

[Admin]

if i display alert in if condition then alert display properly, so what is wrong with popover ?

[melvin]

How fast do you click on your button? just as a test wait some time after loading the page and then try. If it works then it is probably that some scripts or elements are not loaded yet

[isuruAb]

format your code read this meta.stackoverflow.com/questions/251361/…

[Admin]

@ gaetanoM, if i click first time its working properly, i click again it hides, after that i click it then popover display and hide automatically this is the problem.

[gaetanoM]

@pramodbadgujAR I'm sorry but I cannot understand. Can you help me? You can use the methods show and hide to programmatically show and hide the popover. Of course you can do this using data attribute. What is exactkly your issue? in the question you wrote: if i click button first time it doesn't show the popover after that it works fine

[Admin]

@ gaetanoM, after making changes as per your answer what happening is when i click button first time it shows popover but after that whenever i click button popover display and hide within a second.

[Admin]

@ gaetanoM yeah you are right but what wrong with my code.

[gaetanoM]

@pramodbadgujARI did a last improvement because you might have more than one popover so it's best handling a property for the button.... Thanks.

[cwhisperer]

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. I forgot it...