Search code examples
javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-popover

How to show bootstrap popover for invalid input?

I've some input boxes where if it's value is other than 1,I need to show a popover saying it is invalid for that particular input.

My code

<br/>
<br/>
<br/>
<input type="text" class="check" />
<input type="text" class="check" />
<input type="text" class="check" />
<input type="text" class="check" />
<input type="button" id="Save" value="Save" />

JavaScript

$(document).ready(function() {
  $("#Save").click(function() {
    $(".check").each(function() {
      $val = $(this).val();
      if ($val != 1) {      
        $(this).popover({
          content: "Invalid"
        });
      }
    })
  })
})

LIVE DEMO

Solution

  • You are initializing the .popover plugin, but you are not telling it to show.

    Just do this:

    $(this).popover('show');

    Demo: http://jsfiddle.net/bqo5mdcz/3/