引导工具提示在实时站点上不起作用，但在控制台上运行良好

Bootstrap tooltip not working on live site but woking fine on console

本文关键字：控制台 运行 不起作用 实时 站点 工具提示      更新时间：2023-09-26

引导工具提示在控制台上很好，但在实时上没有，我也在使用jquery u，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>

你可以试试这个：

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

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

检查 jsfiddle 示例

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

OP 中的代码片段指示正确的顺序，但请确保在 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中的代码片段）。

$('[data-toggle="tooltip"]').tooltip();
相关文章：