rlcrews rlcrews - 1 month ago 11
AngularJS Question

How to get the uib-popover to open or close when the focus of the input field changes

I have a input field that has the uib-popover control on it. I have followed the documentation on how to get the directive to open but I have noticed some discrepancies in the documentation as well as examples on plnker and SO questions here.

Within my hmtl I have the inputs set as follows:

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label>Password</label><input type="{{user.inputType}}" ng-blur="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Enter Password" id="password" required class="form-control" ng-model="user.newUser.password" uib-popover-template="'myPopoverTemplate.html'" uib-popover-trigger="'focus'"/>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label>Confirm Password</label>
<input type="{{user.inputType}}" ng-keyup="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Confirm Password" id="confirmPassword" required class="form-control" ng-model="user.newUser.confirmPassword"/>
<span style="color: red">{{user.message}}</span>

Most examples as well as the SO questions on here are using an older library as attributes are not prefaced with uib-*.

This code/directive currently works and renders but it only work or appears when clicking in the field and then clicking in the same field to close the popover. I have tried both the
trigger and the
trigger. Both have the same result of not rendering or closing the popover unless clicking in the field.

versions of the frameworks used are:

  • angularjs 1.5.8

  • ui-bootstrap 1.3.3

Changing the trigger to match earlier examples were
is used vs.
is used disables the popover
I have created a working plunker that demonstrates what is happening.

Any suggestions on what I am missing or what I need to change.

Thanks in advance


According to tooltip.js description, in order to set a custom trigger, it needs to be specified via trigger option passed to the $tooltipProvider.options method. In your case for focus trigger it will be:

app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
    $uibTooltipProvider.options({ trigger: 'focus' });

Updated plunker that shows how to trigger tooltip on focus handler.