如何使用 Twitter 的 Bootstrap 调用 javascript 函数？答案

【问题标题】：How to call a javascript function using Twitter´s Bootstrap?如何使用 Twitter 的 Bootstrap 调用 javascript 函数？
【发布时间】：2012-02-19 21:26:34
【问题描述】：

我想使用 Tritter 的 Bootstrap 中提供的 javascript。我已经检查过所有的 .js 文件都被指出了。

我想测试它是否工作正常，所以在阅读docs 之后，我明白我必须“调用”适当的javascript函数？

使用 bootstrap-tooltip.js 通过javascript触发工具提示：$('#example').tooltip(options)

如何调用该函数？好像放合适的html还不够，还要调用函数？

感谢您的帮助！！

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

为 HTML 元素提供 example 的 ID 和适当的属性，如下所示：

<p><a href="#" rel="tooltip" title="first tooltip" id="example">hover over me</a>,/p>

在您的 <head> 中创建一个 JavaScript <script> 元素，确保已加载 jQuery，然后在 jQuery 中将工具提示添加到 ID 为 example 的元素：

<script type="text/javascript">
    window.onload = function()
    {
        if(!window.jQuery)
        {
            alert('jQuery not loaded');
        }
        else
        {
            $(document).ready(function(){
                $('#example').tooltip({'placement':'top', 'trigger' : 'hover'});
            });
        }
    }
</script>

当您将鼠标悬停在 #example 元素上时，这将设置一个工具提示。将 top 更改为 left、right 或 bottom 以更改工具提示相对于元素本身的放置位置。

如果您将来可能想要，这也是您设置弹出框的方式。

【讨论】：

感谢您的详细回复！我试过了，但没有用。我认为这可能与链接有关？我在脑海中添加了：
在 <body> 标记结束之前加载 JavaScript 文件。查看documentation的源代码。检查您的bootstrap/js 文件夹中的jquery.js、bootstrap-tooltip.js 和bootstrap.js，如果您没有点击documentation source code 中指向它们的链接，请将它们保存3 个文件到bootstrap/js 文件夹（至少3 个！我都有，所以我不确定你到底需要哪个）。