JQuery Tooltip не работает с bootstrap js

Question

Я создал угловую директиву для всплывающей подсказки 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)

Answer 1

Bootstrap.js также имеет функцию tooltip с именем tooltip. Таким образом, он переопределяет функцию tooltip функции jQuery UI tooltip.

Если вам нужно использовать оба jQuery UI и Bootstrap, но вам нужна подсказка интерфейса jQuery, просто добавьте bootstrap.min.js до jquery-ui.min.js.

Answer 2

Просто за головы, Demo-2 работает: added position relativehere

Просто в-случае, если вы хотите использовать его: tooltip options