Bootstrap工具提示不工作在现场，但在控制台上工作得很好

Bootstrap工具提示在控制台上很好，但在现场没有，我也在使用jquery UI，jQuery UI版本是v1.10.4和bootstrap版本是3.3.6。下面是我使用的代码：Bootstrap工具提示不工作在现场，但在控制台上工作得很好

$('[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>

来源

2016-04-26 Jason

可以显示一个HTML片段呢？ –

HTML部分在哪里实际添加了应具有工具提示的元素？根据你在HTML中使用的内容，你确定已经添加了data-type =“tooltip”或“data-toggle =”tooltip“ – chrisv

使用数据切换，而不是数据类型..我面临同样的问题，然后通过改变它的工作.. – Dhara

你可以试试这个：

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

来源

2016-04-26 11:14:39 Jainam

我的html部分 Jason

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

检查jsfiddle例如

来源

2016-04-26 11:18:27

我的html部分一些文字[Why Do We Ask]我试过$（'[data-toggle =“tooltip”]'）。工具提示（）;但这只适用于控制台而不是它的现场网站。 – Jason

我在我的小提琴示例中添加了它，它可以工作。在这里检查它http://jsfiddle.net/heshamElghndour/dzkCz/51/ –

并确保你的包括作为第一个jQuery然后bootstrap.js作为bootstrap.js只是jquery插件。 –

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

您在OP中的代码片断指示正确的顺序，但确保jQuery脚本在HTML中添加之前jQuery UI和Bootstrap是！ ;）

不久解释说：提示离不开一个元素被触发（即<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();

来源

2016-04-27 10:28:19 chrisv

Bootstrap工具提示不工作在现场，但在控制台上工作得很好

回答

相关问题