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版本创建一个不同的名称，并允许Bootstrap插件保持命名工具提示（尝试在Bootstrap小部件上使用noConflict选项只会导致很多错误，因为它确实不能正常工作; 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>

漂亮的复制粘贴代码也处理按钮冲突：

<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.js之后加载bootstrap.js，以便引导.tooltip方法优先。

Answer 3

这对我有用：

如果您需要使用JQuery-UI但想要使用bootstrap的工具提示，只需从此website获取JQuery-UI的自定义版本。

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

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

Answer 4

如果您必须在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>

这将覆盖jquery-ui的工具提示并始终使用bootstraps。

Answer 5

假设UI将在bootsrap初始化后调用

在UI初始化之前存储引导函数

jQuery.fn.bstooltip = jQuery.fn.tooltip;

然后将其称为以下

$('.targetClass').bstooltip();

Answer 6

This solution似乎对我有用。

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Answer 7

如何仅使用Bootstrap popovers呢？ BS popovers不会创建相同的冲突，尽管它们需要相同的tooltip.js组件。是的，它们更具风格，但不会导致我的JQuery UI按钮变得不稳定。

我正在使用Jquery UI仅用于自定义自动完成/组合框（因此不能声称其他JQ-UI控件没问题）并且以上都没有解决组合框按钮上的CSS问题在调用时变得“没有样式” BS工具提示。切换到BS Popovers提供了基本相同的效果，没有冲突，没有重新排序我的脚本导入，也没有需要明确的桥接语句。

Answer 8

有一个简单而好的解决方案，只需重新排列你的bootstrap和jquery ui文件链接：

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

在加载boostrap js文件之前加载jQueryui。这对我有用。

Answer 9

尝试使用jQuery.noConflict()，看看这对你有帮助。它看起来像bootstrap和jQuery使用相同的命名空间，也许bootstrap和jQuery工具提示被加载到同一个函数中，或者首先加载一个。

您还可以检查首先加载的库。通常，如果您在javascript中声明两次相同的函数，则第二个是使用的函数。

第三，检查jQueryUI包（on their website)，看看你是否可以下载一个没有包含工具提示的版本（我检查过，这是完全可行的）。

Answer 10

一种简单的方法是在jquery-ui.js之后加载bootstrap.js，以便引导程序.tooltip覆盖jquery UI。如果您正在使用像requirejs这样的模块加载器，那么您可以根据jquery-ui制作bootstrap，如下所示：

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...

Answer 11

另一种方法是下载自定义构建的 jquery UI。

排除不需要的内容，在本例中为工具提示。

可以从这里下载https://jqueryui.com/download/

这样你就可以把它包含在任何地方

jQueryUI工具提示与Twitter Bootstrap竞争

11 个答案: