Question

我想在bootstrap上使用工具提示。我想将工具提示用于<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

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

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

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

Answer 2

  <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>

Answer 3

选择加入功能

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

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

因此，您可以在关闭正文标记之前将其添加到您的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() 
})

之后将此代码添加到您的头部（您加载所有javascripts），但请确保将其放在加载bootstrap.js的行下面的某个位置：

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

然后它应该工作。

Bootstrap工具提示背景没有显示

3 个答案: