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&nbsp;。只需取消选中“工具提示”选项，然后下载它（它将类似于“ jquery-ui-1.10.4.custom.js”）。只需将其添加到您的项目中，而不是将其添加到当前正在使用的版本中，即可开始聚会了。这样可以避免冲突。它对我来说就像一种魅力！