引导工具提示无法在实时站点上运行，但在控制台上运行良好答案

【问题标题】：Bootstrap tooltip not working on live site but woking fine on console引导工具提示无法在实时站点上运行，但在控制台上运行良好
【发布时间】：2016-04-26 11:02:01
【问题描述】：

引导工具提示在控制台上运行良好，但不是在现场，我也在使用 jquery ui，jQuery UI 版本是 v1.10.4 和引导程序版本 3.3.6。以下是我正在使用的代码：

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

这是我正在使用的 js 文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--<link type="text/css" rel="stylesheet" href="/css/jquery-ui.min.css"/>-->


<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/chosen.jquery.min.js"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【问题讨论】：

你也能显示一个 html sn-p 吗？
您实际添加应该具有工具提示的元素的 HTML 部分在哪里？您确定根据您在 HTML 中使用的内容添加了data-type="tooltip" 或data-toggle="tooltip"？
使用数据切换而不是数据类型..我遇到了同样的问题，然后它只通过改变它就可以了..
@Sumobob 这是我的 html 部分：一些文字[我们为什么要问]
@chrisv 这是我的 html 部分：一些文字[我们为什么要问]

标签： javascript jquery css twitter-bootstrap jquery-ui

【解决方案1】：

你可以试试这个：

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

【讨论】：

我的 html 部分一些文字[我们为什么要问] 我试过 $('[ data-toggle="tooltip"]').tooltip();但这仅适用于控制台而不是实时站点。

【解决方案2】：

如果您想使用它，请确保从您的 jQuery 选择器中添加 data-type 在您的元素中
或选择 data-toggle="tooltip"

查看 jsfiddle 示例

【讨论】：

我的 html 部分一些文字[我们为什么要问] 我试过 $('[ data-toggle="tooltip"]').tooltip();但这仅适用于控制台而不是实时站点。
我将它添加到我的小提琴示例中并且它有效。在这里查看jsfiddle.net/heshamElghndour/dzkCz/51
并确保首先包含 jQuery，然后是 bootstrap.js，因为 bootstrap.js 只是 jquery 插件。
是的，我首先包含了 jQuery，然后是 bootstrap，但没有任何效果，tooltip() 仅适用于控制台，但不适用于我的情况。

【解决方案3】：

在 OP 下方的评论中，您说您希望工具提示仅在 Some text 上显示。您的 HTML 表明您希望它显示在整个标签上。但无论如何：我给你做了一个小提琴 (https://jsfiddle.net/Lkg3mag5/2/)，我使用 jQuery 和 jQuery UI 仅在 Some text 上显示工具提示。

您在 OP 中的代码 sn-p 指示正确的顺序，但请确保在 jQuery UI 和 Bootstrap 之前将 jQuery 脚本添加到 HTML 中！ ;)

简要说明：没有元素就无法触发工具提示（即<p>Some text</p>。我在小提琴中重组了您的HTML属性，以便在段落上触发工具提示。

对 HTML 进行了重组以适合您的评论。

<label>
  <p data-toggle="tooltip" data-placement="top" title="Tooltip dummy text." class="t-tip">
    Some Text
  </p>
  <a class="why_ask" onclick="quiz._popModal('q307')">
    [Why Do We Ask]
  </a>
</label>

JS / jQuery（只是从 OP 重用了您的代码 sn-p）。

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

【讨论】：