jquery - 无法让 boostraps jQuery 工具提示出现

Question

开始感到沮丧，这让我更难看出我可能哪里出错了，但本质上我是在尝试让 Bootstrap 的 jQuery 工具提示在将鼠标悬停在我页面内容中的图像上时起作用。

正文中的 HTML:

<div class="tooltip-demo well">
<a title="Tooltip Text Goes Here" rel="tooltip" class="pennant-task" href="#">
<img src="/ssawp/wp-content/themes/wordpress-bootstrap/images/tasks/ytool-boatparts.jpg" />
</a>
</div>

标题:

<script type="text/javascript">
    $('.tooltip-demo.well').tooltip({
        selector: "a[rel=tooltip]"
    })
</script>
<script src="bootstrap.js" type="text/javascript"></script>

我已经缩短了路径以使其更易于浏览，但请随时查看问题实时:

http://okamistudio.com/ssawp/pennants/

我正在尝试在“黄色三 Angular 旗”文本 block 下方的小船图标上实现工具提示。

如有任何帮助或指导，我们将不胜感激。

Answer 1

首先，您需要在编写自己的代码之前包含 bootstrap.js。其次，您需要将代码包装在文档就绪处理程序中。

此外，您还没有在示例中包含它，因此为了完整起见，我也包含了所需的 jquery.js。试试这个:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('.tooltip-demo.well').tooltip({
            selector: "a[rel=tooltip]"
        });
    });
</script>