Show popover on button click using jquery
I am trying to display a notification using a popover, it works, but after loading the page, if I click the button for the 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
}
});
You should take a look at the popovers method :
To show the popover you need to use:
$('#element').popover('show');
Instead of this:
$('[data-toggle="popover"]')
I suggest you refer to your item directly.
$('#bulk_actions_btn_new') or $(this)
If you want to use the data attribute to select elements, you need to use the filter function .
To avoid flickering effects, you can only show the popover if it is hidden. If you click too quickly on the button, you can avoid hiding the popover handling of the hide.bs.popover event.
Excerpt:
$(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>
source to share
you need to enable the popover before you can use it. They are not enabled by default. So when you call the popover () method, you are actually initializing the popover. You are doing this on a click event and therefore it doesn't work the first time. You have to do this when document.ready runs like so -
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
This will load all bootstrap files into your code
source to share