AngularJS Bootstrap Tooltip - триггер события

Question

Я смотрю в подсказку Ural Angular Bootstrap, что бы я хотел сделать, это показать подсказку инструмента не на фокусе или размытии, но когда я нажимаю кнопку. Я знаю, что могу сделать это с поставщиком, но неясно, как это сделать. Я хотел бы сделать это без Javascript или, если это возможно JQuery, так как я уверен, что есть угловой путь :)

(function(){ 
    var app = angular.module("ngSignupPage", ['ui.bootstrap']) 
     .controller("signUpController", function($scope) {  
      $scope.tooltipMessage = 'Hola mundo!';   
      $scope.showTooltip = function(){ 
       // I'd like to show the tooltip with a custom message here 
      }; 
     }); 
})(); 

<form name="signupForm" noValidate ng-submit="showTooltip()"> 
    <input 
     type="text" 
     tooltip="{{tooltipMessage}}" 
     tooltip-trigger="focus" /* Can i set this when 'showTooltip' is clicked? */ 
     tooltip-placement="bottom" /> 
    <button>Save</button> 
</form> 

Answer 1

UPDATE

Вот лучшее решение без Jquery, используя директиву огня customEvent.

На ваше приложение конфигурации вы добавляете пользовательский триггер:

.config(['$tooltipProvider', function($tooltipProvider){ 
    $tooltipProvider.setTriggers({'customEvent': 'customEvent'}); 
}]); 

Html:

<div fire-custom-event> 
    <span tooltip-html-unsafe="My <em>fancy</em> tooltip" tooltip-trigger="customEvent">Target for a tooltip</span> 
    <button>Click me</button> 
</div> 

Директива:

angular.module('myApp').directive('fireCustomEvent', function() { 
    return { 
     restrict: "A", 
     link: function (scope, element) { 
      element.find('button').on('click', function() { 
       element.find('span').trigger("customEvent"); 
      }); 
     } 
    }; 
}); 

Check the demo here

ПЕРВЫЙ ОТВЕТ

В приложении конфиг вы можете добавить пользовательский триггер:

.config(['$tooltipProvider', function($tooltipProvider){ 
    $tooltipProvider.setTriggers({'customEvent': 'customEvent'}); 
}]); 

А потом у вас контроллер вы можете запустить событие. К сожалению, вам нужно JQuery, чтобы сделать это:

angular.module('myApp').controller('myController', ['$scope','$timeout', 
function($scope, $timeout) { 
    $scope.fireCustomEvent = function() { 
     $timeout(function() { 
     $('#tooltipTarget').trigger('customEvent'); 
     }, 0); 
    } 
}]); 

Check this demo here