twitter-bootstrap jQueryUI 工具提示正在与 Twitter Bootstrap 竞争
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13731400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryUI Tooltips are competing with Twitter Bootstrap
提问by markdotnet
I have been able to get some tool tips to work finallywith the following code:
我已经能够获得一些工具提示，最终可以使用以下代码：
<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>
and then
接着
<script>
$('[rel=tooltip]').tooltip();
</script>
The problem I'm running into is that it is using jQueryUI tooltips (no arrows, big ugly tooltips) instead of Bootstraps.
我遇到的问题是它使用 jQueryUI 工具提示（没有箭头，丑陋的工具提示）而不是 Bootstrap。
What do I need to do to make use of the Bootstrap Tooltips instead of jQueryUI?
我需要做什么才能使用 Bootstrap 工具提示而不是 jQueryUI？
回答by The Demz
Both jQuery UI and Bootstrap use tooltipfor the name of the plugin. Use $.widget.bridgeto create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip (trying to use the noConflictoption on the Bootstrap widget just result in a lot of errors because it does not work properly; that issue has been reported here):
jQuery UI 和 Bootstrap 都tooltip用于插件的名称。使用$.widget.bridge创造了jQuery UI的版本不同的名称，并允许引导插件留下来命名的工具提示（试图使用noConflict的引导选项窗口小部件只是造成了很多的错误，因为它不能正常工作，这个问题已经在这里报道)：
// 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>
回答by Stefan Musarra
A simple solution is to load bootrap.js after jquery-ui.js, so that the bootstrap .tooltip method takes precedence.
一个简单的解决方案是在 jquery-ui.js 之后加载 bootrap.js，这样 bootstrap .tooltip 方法优先。
回答by Poncho
This worked for me:
这对我有用：
If you need to use JQuery-UI but you want to use bootstrap's tooltip, simply get a customized version of JQuery-UI from this website.
如果您需要使用 JQuery-UI 但又想使用 bootstrap 的工具提示，只需从此网站获取 JQuery-UI 的定制版本即可。
Simply uncheck the "Tooltip" option, and download it (it will be something like "jquery-ui-1.10.4.custom.js").
只需取消选中“工具提示”选项，然后下载它（类似于“jquery-ui-1.10.4.custom.js”）。
Simply add it to your project instead of the version you are currently using now and, you are ready to party. This will avoid the conflict. It worked like a charm to me!
只需将它添加到您的项目中，而不是您当前使用的版本，您就可以开始聚会了。这将避免冲突。它对我来说就像一种魅力！
回答by supersan
In case you must load jquery-ui.jsafter bootstrap.jshere is how to do it:
如果您必须jquery-ui.js在bootstrap.js此之后加载，请执行以下操作：
<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>
<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>This will override jquery-ui's tooltip and always use bootstraps.
这将覆盖 jquery-ui 的工具提示并始终使用引导程序。
回答by Projesh Pal
Assuming that UI will called after bootsrap initialized
假设 UI 将在 bootsrap 初始化后调用
Store the bootstrap function just before the UI is initialized
在 UI 初始化之前存储引导函数
jQuery.fn.bstooltip = jQuery.fn.tooltip;
Then call it as following
然后调用如下
$('.targetClass').bstooltip();
回答by Jon Stevens
This solutionseems to work well for me.
这个解决方案似乎对我很有效。
// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
回答by AgonyOfVictory
How about just using Bootstrap popovers instead? BS popovers do not create the same conflict although they require the same tooltip.js component. Yes, they are more stylized but doesn't cause my JQuery UI buttons to go wonky.
只使用 Bootstrap popovers 怎么样？尽管 BS 弹出框需要相同的 tooltip.js 组件，但它们不会产生相同的冲突。是的，它们更加风格化，但不会导致我的 JQuery UI 按钮变得不稳定。
I'm using Jquery UI only for custom autocomplete/comboboxes (so can't claim other JQ-UI controls are ok) and none of the above worked to fix the CSS issue on the combobox buttons becoming "unstyled" when invoking BS Tooltips. Switching to BS Popovers provided essentially the same effect with no conflicts, no reordering of my script imports, and no explicit bridge statements needed.
我仅将 Jquery UI 用于自定义自动完成/组合框（因此不能声称其他 JQ-UI 控件正常），并且上述任何一项都无法解决在调用 BS 工具提示时组合框按钮上的 CSS 问题变得“无样式”的问题。切换到 BS Popovers 提供了基本相同的效果，没有冲突，没有重新排序我的脚本导入，也不需要明确的桥接语句。
回答by Matt
try using jQuery.noConflict()and see if that helps you at all. It looks like bootstrap and jQuery are using the same namespace, and perhaps the bootstrap and jQuery tooltips get loaded into the same function, or one gets loaded first.
尝试使用jQuery.noConflict()看看是否对你有帮助。看起来 bootstrap 和 jQuery 使用相同的命名空间，也许 bootstrap 和 jQuery 工具提示被加载到同一个函数中，或者一个被先加载。
You can also check to see which library is loaded first. Usually if you declare the same function twice in javascript the second one is the one that is used.
您还可以查看首先加载哪个库。通常，如果您在 javascript 中两次声明相同的函数，则第二个是使用的函数。
Thirdly, check the jQueryUI package (on their website)and see if you can download a version that does not have the tooltips included (I checked and this is totally doable).
第三，检查 jQueryUI 包（在他们的网站上），看看是否可以下载不包含工具提示的版本（我检查过，这是完全可行的）。
回答by Sanjib Debnath
There is a easy and good solution, just rearrange your bootstrap and jquery ui file link like this:
有一个简单而好的解决方案，只需像这样重新排列引导程序和 jquery ui 文件链接：
<script src="/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
Just load jQueryui before loading boostrap js file. It's work for me.
只需在加载 boostrap js 文件之前加载 jQueryui。这对我有用。
回答by Andrew
An easy way is to load bootstrap.js after jquery-ui.js, so that the bootstrap .tooltip overrides jquery UI's. If you're using a module loader like requirejs, then you could make bootstrap dependent upon jquery-ui, as such:
一种简单的方法是在 jquery-ui.js 之后加载 bootstrap.js，以便引导 .tooltip 覆盖 jquery UI。如果您使用的是像 requirejs 这样的模块加载器，那么您可以使引导程序依赖于 jquery-ui，如下所示：
requirejs.config({
baseUrl: 'js',
waitSeconds: 30,
shim: {
'bootstrap': {
deps: [ 'jquery', 'jquery-ui' ]
},...
