current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite
1

I'm looking into the Angular Bootstrap UI tooltip, what i'd like to do is show the tool tip not on focus, or blur, but when I click a button. I know i can do this with a provider, but it's not clear how. I'd like to do this without Javascript or JQuery if possible, as i'm sure there's an Angular way :)

(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>
share|improve this question
up vote 1 down vote accepted

UPDATE

Here's a better solution without Jquery using a directive to fire the customEvent.

On your app config you add the custom trigger:

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

Directive:

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

FIRST ANSWER

On your app config you can add a custom trigger:

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

And then in you controller you can fire the event. Unfortunately you need JQuery to do this:

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

Check this demo here

share|improve this answer
    
Perfect, that gets my head around the providers perfectly :) thanks! – NewZeroRiot Apr 9 '15 at 5:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.