Octtavius Octtavius - 1 year ago 135
AngularJS Question

How to stop displaying angular tooltip on focus/click?

I have a field which on blur displays a tooltip. But I don't know why it also pops up when I click on the field.
Here is the codepen example: http://codepen.io/Octtavius/pen/aZzyKw?editors=1010

Below is the code where I use angular bootstrap:

<body ng-app="ui.bootstrap.demo" class='container'>

<input type="text"
popover-title="This is a popover"
ng-blur="myPopover.open()" />

<script type="text/ng-template" id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data"/>
<button class="btn btn-success" ng-click="myPopover.close()">
Close me!



app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

'myPopoverCtrl', ['$scope', function($scope) {

// query popover
$scope.myPopover = {

isOpen: false,

templateUrl: 'myPopoverTemplate.html',

open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';

close: function close() {
$scope.myPopover.isOpen = false;

Can anyone help to understand why the tooltip popup on click when I set it to popup on blur/when leave the field???

Answer Source

That's because default trigger for popover is click: https://angular-ui.github.io/bootstrap/#/popover. Try to disable it by popover-trigger="none"