Question

我不得不修复jQuery UI和Bootstrap之间的冲突，因为我需要两个工具提示功能。

所以这就是我所做的：

，包括：

jQuery的1.7.2.min.js
UI内容
Bootstrap（v3.1.1缩小版）
解决冲突问题
另一个调用Bootstrap工具提示的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);

Answer 1

这是因为插件的名称相同＆＃34; Tooltip＆＃34;同时。您可以使用 $。widget.bridge

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

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

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

更改引导位置的路径。我希望它可以帮到你

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

2 个答案: