Jquery Tooltip无法使用bootstrap js

Question

I have created an angular directive for jquery tooltip.

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 and working.(not referenced bootstrap.js yet)

But if I use bootstrap.js on my project, it is not working.

Demo-2 is here and not working. (I referenced bootstrap.js)

Answer 1

Bootstrap.js is also having a tooltip feature named with tooltip function. So it is overriding the tooltip function of the jQuery UI tooltip function.

If you have to use both jQuery UI and Bootstrap plugins but wants tooltip of jQuery UI, just include the bootstrap.min.js before the jquery-ui.min.js .

Answer 2

Just for the heads up, Demo-2 is working: added position relative here

Just in-case you want to use it: tooltip options