javascript - Bootstrap 工具提示不显示工具提示的样式，仅显示数据

Question

试图让 Bootstrap 显示工具提示功能，我完全遵循了 Bootstrap DOC关于Tooltips并声明我的属性。当我将鼠标悬停在文本上时，数据 Some tooltip text!显示有 alt=""仅功能，但不像其文档中提到的 Bootstrap 风格。

我已采取的解决此问题的步骤:

1. 从外部包含 tooltip.js CDN
2. 激活工具提示 throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
3. 添加Google API of jQuery (我知道不是必要的)
4. 检查页面是否正在加载 Bootstrap CDN 和外部 CDN(全部执行!)

header HTML 标记

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML 标记

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

这是它如何显示的图像。

Answer 1

还请记住，Bootstrap Tooltip 不喜欢 jQuery UI(有一些名称冲突，'tooltip' 就是其中之一)。

解决方案是更改脚本加载顺序:首先是 jQuery UI，然后是 bootstrap.js。