使用JavaScript触发Bootstrap工具提示选项

Question

请问如何通过JavaScript传递选项来使用Bootstrap的提示框/弹出框？ 可以使用数据属性，例如：

<input type="text" data-toggle="tooltip" data-placement="right" data-animation="fade" data-delay="200" data-trigger="focus" data-content="foo">

但是使用JavaScript却可以实现此功能:

<script>
    jQuery(function ($) {
        $("input").popover()({
            animation:"fade",
            delay: "200",
            trigger:"focus",
            placement: "right"
        });
    });
</script>

正确的语法是什么？

- ss_millionaire

Answer 1

对于“tooltip”，应该是：

提示文本应该如下所示：

jQuery(function ($) {
    $("input").tooltip({...});
});

改为：

jQuery(function ($) {
    $("input").popover({...});
});

更新： 很抱歉引起了混淆，这里可以正常工作，但是：

popover()({...});

应该是：

popover({...});

HTML:

<input type="text" data-toggle="tooltip" data-placement="right" data-animation="fade" data-delay="200" data-trigger="focus" data-content="foo">

JS:

jQuery(function ($) {
    $("input").popover({
        animation:"fade",
        delay: "200",
        trigger:"focus",
        placement: "right"
    });
});

请确保正确添加了JavaScript和CSS文件。

- The Alpha

---

我想使用一个弹出框。注意：当我像第一个例子中那样通过数据属性传递选项时，$（“input”）.popover（）可以工作，$（“input”）.tooltip（）也是如此。但两者都无法通过javascript工作。 - ss_millionaire

那是因为你只是用它的选项来初始化弹出框（或者像上面一样没有任何选项）。要调用弹出框并使其显示，您需要使用 $('input').popover('show');。 - jme11

值定义中的小错误：$（“input”）.popover（{ animation:true， delay: 200， trigger：“focus”， placement: “right” }）; - nh-labs

Answer 2

显示元素的工具提示。

$('#element').tooltip('show')

隐藏元素的工具提示。

$('#element').tooltip('hide')

切换元素的工具提示。

$('#element').tooltip('toggle')

隐藏并销毁元素的工具提示。

$('#element').tooltip('destroy')

完整参考文档：这里

- Cristofor