Octtavius Octtavius - 6 months ago 50
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"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
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!
</button>
</script>

</body>


Controller

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

app.controller(
'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

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

Comments