jQueryUI 工具提示正在与 Twitter Bootstrap 竞争 [英] jQueryUI Tooltips are competing with Twitter Bootstrap

问题描述

我已经能够获得一些工具提示，最终使用以下代码:

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 工具提示(没有箭头，丑陋的工具提示)而不是 Bootstrap.

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);

代码如下:

// 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 竞争的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！