I'm trying to open a popover on a form, if the first option ("Nothing selected") is selected, when clicking "Next" on a wizard. I'm using Bootstrap and Bootstrap Wizard.
I've already gotten a popover to work, but not in the way I need.
I want the popover on the <a>
tag, but when the Next button is clicked, not when I click the "Test" button.
I hope I'm being clear.
Here's what I've tried so 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 some errors in your javascript and you weren't initializing the 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/