jQuery UI + Bootstrap + noConflict 导致“数据不是函数”（工具提示）答案

【问题标题】：jQuery UI + Bootstrap + noConflict results in "data is not a function" (tooltip)jQuery UI + Bootstrap + noConflict 导致“数据不是函数”（工具提示）
【发布时间】：2014-08-03 20:27:27
【问题描述】：

我必须解决 jQuery UI 和 Bootstrap 之间的冲突，因为我需要这两个工具提示功能。

这就是我所做的：

包括：

jQuery-1.7.2.min.js
用户界面的东西
引导程序（v3.1.1 缩小版）
解决冲突 js
另一个调用引导工具提示的 JavaScript

这是我的修复：

$(document).ready(function() {
    // Tooltip
    var bootstrapTooltip = $.fn.tooltip.noConflict(); // return $.fn.button to previously assigned value
    $.fn.bootstrapTooltip = bootstrapTooltip;       // give $().bootstrapTooltip the Bootstrap functionality
});

这是我的电话：

$(document).ready(function() {
    $('.icon-tooltip').bootstrapTooltip();
});

这是 HTML：

<a onclick="return false;" rel="nofollow" href="" class="icon-tooltip"
    title="{% trans from "...." %}landingpage......
    data-toggle="tooltip"
    data-placement="bottom"
    data-html="true">
    <i class="icon icon-help-circled"></i>
</a>

会发生什么：当用户将鼠标悬停在 a.icon-tooltip 上时会显示工具提示（格式正确），但在离开元素时，它会返回此错误：

TypeError: a(...)this.type.data 不是函数

这是Bootstrap中的位置：

var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);

【问题讨论】：

标签： jquery twitter-bootstrap user-interface tooltip

【解决方案1】：

这是由于两个插件“工具提示”的名称相同。您可以通过使用 $.widget.bridge

在 jQuery UI 中重命名函数名称来修复它

检查http://www.mycodezone.com/fix-bootstrap-tooltip-and-jquery-ui-tooltip-conflict/ 完整的细节。我已经解决了同样的问题。

【讨论】：

【解决方案2】：

我使用这段代码来初始化工具提示并解决TypeError: "[data-toggle=\"tooltip\"]".tooltip is not a function错误：

$(document).ready(function(){
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
});

这个例子在本地对我有用：

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Snippet Bootstrap grid</title>

        <!-- Bootstrap -->
        <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
       <![endif]-->
    </head>
    <body>
        <div class="container-fluid">
            <div="row">
                <div class="col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
                </div>
            </div>
            <div="row">
                <div class="col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
                    <br/>
                    <a href="#" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip">Click it!</a>
                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){
                $(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                });
            });
        </script>
    </body>
</html>

更改引导位置的路径。希望对你有帮助

【讨论】：