Bootstrap工具提示不能在实时网站上工作,但在控制台上工作正常

时间:2016-04-26 11:02:02

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

Bootstrap工具提示在控制台上很好,但不是在实时,我也使用jquery ui,jQuery UI版本是v1.10.4和bootstrap版本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>

3 个答案:

答案 0 :(得分:2)

你可以试试这个:

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

答案 1 :(得分:0)

如果你想使用它,请确保你的jQuery选择器中你在元素中添加了data-type OR 选择data-toggle="tooltip"
< / p>

检查 jsfiddle 示例

答案 2 :(得分:0)

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

OP中的代码片段表示正确的顺序,但确保在jQuery UI和Bootstrap之前的HTML中添加了jQuery脚本! ;)

简短解释:工具提示无法在没有元素的情况下触发(即<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();