jQueryUI工具提示正在与Twitter Bootstrap竞争

Question

我已经能够使用以下代码最终获得一些工具提示：<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>接着<script>    $('[rel=tooltip]').tooltip();</script>我遇到的问题是它使用的是jQueryUI工具提示（无箭头，丑陋的大工具提示）而不是Bootstraps。我需要怎么做才能使用Bootstrap工具提示而不是jQueryUI？

Answer 1

jQuery UI和Bootstrap均使用tooltip该插件的名称。使用$.widget.bridge创造了jQuery UI的版本不同的名称，并允许引导插件留下来命名的工具提示（试图使用noConflict的引导选项窗口小部件只是造成了很多的错误，因为它不能正常工作，这个问题已经在这里报道）：

// 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>

不错的复制粘贴代码，它也可以处理按钮冲突：

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

Answer 2

这对我有用：

如果您需要使用JQuery-UI，但要使用引导程序的工具提示，只需从此网站获取定制版本的JQuery-UI 。

只需取消选中“工具提示”选项，然后下载它（它将类似于“ jquery-ui-1.10.4.custom.js”）。

只需将其添加到您的项目中，而不是将其添加到当前正在使用的版本中，即可开始聚会了。这样可以避免冲突。它对我来说就像一种魅力！