Question

我创建了一个new website（它位于子域atm）。但是，文本Get the FinEco Bookmarklet上的工具提示未显示。

<span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
<br>
<a title="" data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:(function(){ window.open('http://fineconomy.com/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)); })();">FinEco  Bookmarklet</a>
</span>

有什么建议吗？

感谢您的回复！

Answer 1

在开发工具中检查元素时，元素上的标题为空：

    <a href="/web/20151001210831/http://growthhackers.com/privacy_policy" 
data-original-title="" title=""><span class="fa fa-bookmark"></span> FinEco Bookmarklet</a>

确保设置标题并调用bootstrap .tooltip()函数：

jQuery(document).ready(function(){
   jQuery('a').tooltip()
});

<强> 更新

您似乎未取消对jquery $变量的引用，这意味着您使用的某些代码已使用jQuery.noConflict()，因此全局jquery对象现在已分配给jQuery变量而不是$变量。

因此，当您致电tooltop时，您应使用jQuery代替$。

在元素级别（a标记），您尚未在title='your text'标记中设置标题属性a，因此工具提示无效，您的标记应如下所示：

<a href="/web/20151001210831/http://growthhackers.com/privacy_policy" 
title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article."><span class="fa fa-bookmark"></span> FinEco Bookmarklet</a>

Answer 2

我们需要在使用之前初始化$(document).ready(){})内的工具提示。

注意到，Bootstrap website来自SQLFiddle，他们说：

出于性能原因，Tooltip和Popover data-apis是选择加入的，   意思是你必须自己初始化它们。

初始化页面上所有工具提示的一种方法是选择它们   通过他们的数据切换属性：
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

在您的情况下，请在jQuery('[data-toggle="tooltip"]').tooltip()功能中添加ready()。它会起作用。

Answer 3

你需要在你的js文件中有这个。

$('[data-toggle="tooltip"]').tooltip()

检查bootstrap网站 http://getbootstrap.com/javascript/#tooltips

Answer 4

这是代码。希望它有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index Page</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
    <br>
    <a title="" data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:(function(){ window.open('http://fineconomy.com/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)); })();">FinEco  Bookmarklet</a>
    </span>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    </script>
</body>
</html>

和截图

enter image description here

Bootstrap - 工具提示未显示

4 个答案: