引导程序工具提示背景未显示

Question

我想在引导程序上使用工具提示。我想使用<td>文本的工具提示。但我的工具提示只是在没有任何背景样式的情况下显示。它只是显示为一个简单的通用工具提示。

查看我的代码：

<td><a data-toggle="tooltip" data-placement="left" title="Test title">Test</a></td>

注意：这是一个HTML页面。这个页面有以下脚本列表：

<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery.appear/jquery.appear.js"></script>
<script src="vendor/jquery.easing/jquery.easing.js"></script>
<script src="vendor/jquery-cookie/jquery-cookie.js"></script>
<script src="vendor/bootstrap/bootstrap.js"></script>
<script src="vendor/jquery.validation/jquery.validation.js"></script>
<script src="vendor/jquery.stellar/jquery.stellar.js"></script>
<script src="vendor/jquery.gmap/jquery.gmap.js"></script>
<script src="vendor/isotope/jquery.isotope.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>

和CSS：

<link rel="stylesheet" href="vendor/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">

Answer 1

选择加入功能

出于性能原因，Tooltip和Popover数据api是可选的，这意味着你必须自己初始化它们。

初始化页面上所有工具提示的一种方法是选择它们按其数据切换属性：复制

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

（来源：引导选项卡）

因此，您可以在结束正文标记之前将其添加到html文件中

<script type="text/javascript">
    $(function () {   
      $('[data-toggle="tooltip"]').tooltip() 
    })
</script>

或者您简单地创建了一个JS文件（例如application.JS），其中包含以下代码：

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

并将其加载到你的html头中，如下所示：

<script src="application.js"></script>

编辑：

好吧，所以你应该明确采用我发布的第二种方法。以下是您要做的：

创建一个名为application.js的文件，将其放入vendor-文件夹，并用以下代码填充：

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

之后，将此代码添加到您的头中（加载所有java脚本的位置），但请确保将其放在加载bootstrap.js:的行下的某个位置

<script src="vendor/application.js"></script>

那么它应该会起作用。

Answer 2

必须使用jQuery初始化工具提示：选择指定的元素并调用tooltip（）方法。

要初始化所有工具提示，只需编写以下代码即可。当然，您需要将其包含在项目bootstrap.js文件中。

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

Answer 3

  <a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom</a>
<script>
$(document).ready(function(){
    $("a").tooltip();
});
</script>
<style>
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
</style>