问题描述
我已经可以使用以下代码获得一些工具提示,这些提示可以最终起作用:
I have been able to get some tool tips to work finally with the following code:
<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>
然后
<script>
$('[rel=tooltip]').tooltip();
</script>
我遇到的问题是它使用的是jQueryUI工具提示(没有箭头,丑陋的大工具提示),而不是Bootstraps.
The problem I'm running into is that it is using jQueryUI tooltips (no arrows, big ugly tooltips) instead of Bootstraps.
我需要怎么做才能使用Bootstrap工具提示而不是jQueryUI?
What do I need to do to make use of the Bootstrap Tooltips instead of jQueryUI?
推荐答案
jQuery UI和Bootstrap都使用tooltip
作为插件的名称.使用$.widget.bridge
为jQuery UI版本创建一个不同的名称,并使Bootstrap插件保持命名的工具提示(尝试在Bootstrap小部件上使用noConflict
选项只会导致很多错误,因为它无法正常工作; 已在此处报告此问题):
Both jQuery UI and Bootstrap use tooltip
for the name of the plugin. Use $.widget.bridge
to create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip (trying to use the noConflict
option on the Bootstrap widget just result in a lot of errors because it does not work properly; that issue has been reported here):
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
因此,使它起作用的代码:
So the code to make it work:
// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>
好的复制粘贴代码也可以处理按钮冲突:
Nice copy paste code that also handles the button conflict:
<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>
这篇关于jQueryUI工具提示正在与Twitter Bootstrap竞争的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!