Search code examples
javascriptjqueryhtmltwitter-bootstrapbootstrap-popover

Bootstrap popover on a specific element


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"
            })
        }
    })
});

Solution

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