Bootstrap Popover Prevent Show in Particular Condition

Question

I am using bootstrap popover on my <button> with data-trigger="click". But when user click on that <button>, I want it to check something beforehand and prevent the popover from showing. For example, if there is input in the form which still empty, popover won't show, else it will show as the normal.

How to do that? I know about BS popover events like .on('show.bs.popover', but I still can't get it accomplished.

I have tried to do this:

btn_register.on('show.bs.popover',function() { //when bs popover about to show
     if (...) $(this).popover('hide');
});

But popover appear in few miliseconds before it hide. _(:"3

Answer 1

Introduction:

data-trigger="click" means: How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

This means:

when an user click on that button the sequence of events triggered is:

• show.bs.popover
• click
• shown.bs.popover

So, you can add a new event handler for the click event:

$('button').on('click',function(e) {
    console.log('button click triggered!')
    if ($('[type="email"]').val().length == 0) {
        $('button').popover('hide');
    }
});

The example:

$('button').popover();
  $('button').on('click',function(e) {
      console.log('button click triggered!')
      //
      // do your test
      //
      if ($('[type="email"]').val().length == 0) {
          $('button').popover('hide');
      }
  });

  $('button').on('show.bs.popover',function(e) {
      console.log('popover show.bs.popover triggered!');
  });

  $('button').on('shown.bs.popover',function(e) {
      console.log('popover shown.bs.popover triggered!');
  });

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

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="button" class="btn btn-default" data-container="body" data-trigger="click"
            data-toggle="popover" data-placement="top" data-content="PopOver Content.">
        Popover on top
    </button>
</form>

Another approach is to set: data-trigger="manual" and handle everything inside the button click event.

Popover manual:

$('button').popover();
$('button').on('click',function(e) {
    //
    // do your test
    //
    if ($('[type="email"]').val().length != 0) {
        $('button').popover('toggle');
    } else {
        $('button').popover('hide');
    }
});

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


<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="button" class="btn btn-default" data-container="body" data-trigger="manual"
            data-toggle="popover" data-placement="top" data-content="PopOver Content.">
        Popover on top
    </button>
</form>