引导工具提示显示为默认工具提示答案

【问题标题】：Bootstrap tooltip is appearing as the default tooltip引导工具提示显示为默认工具提示
【发布时间】：2015-08-20 10:32:59
【问题描述】：

我希望我的工具提示消息在黑色框中显示引导文档，但我得到的是默认的工具提示文本。谁能建议我做错了什么？

<html><head>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<script>

   $("#a").tooltip();

</script>
</head>

<body>
<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</body>

</html>

如果有人告诉我解决我的问题的真正概念，我真的很感激。我该怎么办？ Plunker Demo

谢谢。

【问题讨论】：

看看这是否有帮助 stackoverflow.com/a/19247955 因为我看到你同时包含 jQuery UI 和 Bootstrap，它们都使用工具提示，所以可能存在冲突。

标签： jquery css twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

您似乎没有包含 jquery 和所需的 bootstrap javascript 文件。

样式表和 javascript 的位置也很重要。尝试将 bootstrap javascript 文件 和 bootstrap 样式表文件 放在其他样式表和 javascripts 文件的末尾。

注意： id 是唯一的！明智的做法是使用 class 或 data-toggle 作为选择器。

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>



<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

【讨论】：

谢谢，引导 js 和 css 的顺序是在其他 css 和 js 文件末尾使用它们的真正问题。现在代码按预期工作。
@mystertyboy 请注意，此方法是一种替代方法。但如果它适用于您的情况，那么我想它可以：D 您还可以使用自定义构建从 jquery ui 中排除工具提示，甚至重命名 jquery 工具提示命名空间。
重命名 jquery 工具提示命名空间并从 jquery 中排除工具提示。我不知道这个解决方案。感谢指导这些事情。这是解决这个覆盖方法问题的更有趣的方法。无论如何，它们是否指导我一个 js 文件的多少功能被另一个 js 文件覆盖。

【解决方案2】：

使用此代码我认为这会对您有所帮助..

HTML：

<button class="btn right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</button>

Javascript：

$('button').tooltip();

外部资源是：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

<script src="https://code.jquery.com/jquery-2.1.4.min.js">

【讨论】：

【解决方案3】：

而不是写

<script>

   $("#a").tooltip();

</script>

用这个替换你的脚本

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

这里是fiddle

【讨论】：