无法获得boostraps jQuery工具提示出现

时间:2013-02-09 11:17:14

标签: jquery html css twitter-bootstrap

开始变得沮丧,这让我更难以看到我可能出错的地方,但实际上我正试图让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/

我正在尝试在“黄色三角旗”文本块下方的小船图标上获得工具提示。

非常感谢任何帮助或指导。

1 个答案:

答案 0 :(得分:3)

首先,在编写自己的代码之前,需要包含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>