Jquery Tooltip 不适用于引导 js答案

【问题标题】：Jquery Tooltip not working with bootstrap jsJquery Tooltip 不适用于引导 js
【发布时间】：2015-12-29 03:30:49
【问题描述】：

我已经为 jquery 工具提示创建了一个角度指令。

angular.module("app", []).directive("tooltip", function(){
    return {
        restrict: "A",
        scope:{ 
            title: "@",
            template: "@"
        },
        link: function(scope, element){
            $(element).tooltip({
                title: scope.title,
                tooltipClass: scope.template
            });
        }
    }
})

Demo-1 is here 正在工作。（尚未引用 bootstrap.js）

但是如果我在我的项目中使用 bootstrap.js，它就不起作用了。

Demo-2 is here 并且不工作。（我引用了 bootstrap.js）

【问题讨论】：

jsFiddle...看来Shashank的回答是正确的

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

Bootstrap.js 也有一个以tooltip 函数命名的tooltip 功能。所以它覆盖了jQuery UI tooltip函数的tooltip函数。

如果您必须同时使用 jQuery UI 和 Bootstrap 插件，但想要 jQuery UI 的工具提示，只需在 jquery-ui.min.js 之前添加 bootstrap.min.js。

【讨论】：

这个答案是正确的。如果我们有两个同名的函数（在 js 中），那么最后一个函数会被调用...请参阅jsFiddle 以获取上述答案
这是您的第二个示例的分叉版本，在交换 bootstrap.js 和 jquery-ui.js 的位置后，它正在运行 jsfiddle.net/8h7aa4ok
我有一个小问题，工具提示箭头没有出现。
看起来 jQuery UI 默认不显示工具提示箭头，但您可以按照文档jqueryui.com/tooltip/#custom-style中给出的方式自定义它

【解决方案2】：

请注意，Demo-2 正在运行：added position relativehere

以防万一你想使用它：tooltip options

【讨论】：