Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?

by

You can also build your own extended triggers. This will apply to both Tooltip and Popover.

First extend the Tooltip triggers as follows:

// define additional triggers on Tooltip and Popover
app.config(['$tooltipProvider', function($tooltipProvider){
    $tooltipProvider.setTriggers({
        'show': 'hide'
    });
}]);

Then define the trigger on the HTML tag like this:

<div id="RegisterHelp" popover-trigger="show" popover-placement="left" popover="{{ 'Login or register here'}}">

And now you can call hide and show from JavaScript, this is a show in 3 seconds. 

$("#RegisterHelp").trigger('show');
//Close the info again
$timeout(function () {
    $("#RegisterHelp").trigger('hide');
}, 3000);

More Related Contents:

  1. Using Bootstrap for Angular and Material design for Angular together
  2. Can you override specific templates in AngularUI Bootstrap?
  3. Angular ng-repeat add bootstrap row every 3 or 4 cols
  4. Scope issue in AngularJS using AngularUI Bootstrap Modal
  5. angularjs share data config between controllers
  6. bootsrap nav-bar collapsable cannot make it work
  7. Invoking modal window in AngularJS Bootstrap UI using JavaScript
  8. Angular JS – Automatically focus input and show typeahead dropdown – ui.bootstrap.typeahead
  9. How do I create an AngularJS UI bootstrap popover with HTML content?
  10. Hide Angular UI Bootstrap popover when clicking outside of it
  11. Model in a modal window in angularjs is empty
  12. How do I increase modal width in Angular UI Bootstrap?
  13. Angular bootstrap datepicker date format does not format ng-model value
  14. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS
  15. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  16. AngularJS check if form is valid in controller
  17. How to set the value attribute for select options?
  18. AngularJS: How to nest applications within an angular app
  19. Multiple Module in Angularjs
  20. AngularJS – why is $apply required to properly resolve a $q promise?
  21. Angular ng-click event delegation
  22. Dynamic content added with AngularJS click event not working on the added content
  23. Get the current browser name in Protractor test
  24. $sce.trustAsResourceUrl() globally
  25. AngularJS Service Passing Data Between Controllers
  26. AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?
  27. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?
  28. Auto logout with Angularjs based on idle user
  29. AngularJS – Directives vs Controllers
  30. What is $$phase in AngularJS?

Leave a Comment