Bootstrap 特定元素上的弹出窗口

Question

如果在向导中单击 "Next" 时选择了第一个选项 ("Nothing selected")，我正在尝试在表单上打开弹出窗口。我正在使用 Bootstrap and Bootstrap Wizard.

我已经可以使用弹出窗口，但不是我需要的方式。我想要 <a> 标签上的弹出窗口，但是当单击下一步按钮时，而不是当我单击 "Test" 按钮时。

希望我说清楚了。

这是我到目前为止尝试过的方法：

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

Answer 1

您的 javascript 中有一些错误并且您没有初始化弹出框：$('[data-toggle="popover"]').popover();

以下作品

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

编辑：添加 fiddle：http://jsfiddle.net/timgavin/4rwzsmgc/

Bootstrap 特定元素上的弹出窗口

Bootstrap popover on a specific element

html

javascript

jquery

twitter-bootstrap

bootstrap-popover