Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

171
Views
Show popover on button click using jquery

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 
    }
});
8 months ago · Santiago Trujillo
3 answers
Answer question

0

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>

8 months ago · Santiago Trujillo Report

0

Just check your condition inside

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


    
                
8 months ago · Santiago Trujillo Report

0

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

8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs