javascript - Bootstrap popover on a specific element -

i'm trying open popover on form, if first option ("nothing selected") selected, when clicking "next" on wizard. i'm using bootstrap , bootstrap wizard.

i've gotten popover work, not in way need. want popover on <a> tag, when next button clicked, not when click "test" button.

i hope i'm being clear.

here's i've tried far:

html:

<div>     <a href="#" data-toggle="popover" id="warning" title="hello" data-content="bye!">test</a>     <select class="form-control input-lg" id="some_id">         <option value="0">nothing selected</option>     </select>     <br> </div> 

javascript:

$(document).ready(function () {     $('#rootwizard').bootstrapwizard({         onnext: function (tab, navigation, index) {             $("#warning").popover({             container: "body"             })         }     }) }); 

you had errors in javascript , weren't initializing popover: $('[data-toggle="popover"]').popover();

the following works

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   <div>     <a href="#" data-toggle="popover" data-placement="bottom" id="warning" title="hello" data-content="bye!">test</a>     <select class="form-control input-lg" id="some_id">         <option value="0">nothing selected</option>     </select>     <br> </div>  <script src="http://code.jquery.com/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script> <script> $(document).ready(function () {     $('[data-toggle="popover"]').popover();     $('#rootwizard').bootstrapwizard({         onnext: function (tab, navigation, index) {             $("#warning").popover({                 container: "body"             });         }     }); }); </script> 

edit: added fiddle: http://jsfiddle.net/timgavin/4rwzsmgc/