Tooltip-trigger "input" hides the tooltip on every second keystroke

[herrherrmann]

Hey people.

I'd like to validate a text input field and show a tooltip as soon as the input is evaluated as valid (e.g. through Angular's form property myForm.myField.$valid). In order to catch the input change events I set tooltip-trigger="input".

But on every second change to the input the field, the tooltip would disappear, thus confusing the user (and me :P).

Here's a demo: http://plnkr.co/edit/6kIeoHSyFpIAvvTpgVFt?p=preview

Happens with Angular 1.4.8 and Angular-Bootstrap 1.0.3.

[pkozlowski-opensource]

It does exactly what you've asked it to do - that is - use input event to both open and close tooltip. If you want it to stay open and close on some other event than input you need to specify what this event should be. Here is an example using blur:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']).config(function($uibTooltipProvider) {
  $uibTooltipProvider.setTriggers({'input': 'blur'});
});

http://plnkr.co/edit/Tp0VxsM4XMkADSg8PPwN?p=preview

@wesleycho @Foxandxss maybe we should support this as an option to tooltip-trigger so one could do: tooltip-trigger="input:blur" or something similar?

[Foxandxss]

This is documented correctly. Any non default trigger on the map will be used both for show an hide.

I can see an option like that, but on the other hand I am not really fond on giving custom syntax in our directives. People will need to learn about that and that is a hard thing to do.

[herrherrmann]

Ah ok, thank you for clarifying and providing the workaround!
The way I understood it was: refresh the tooltip whenever the trigger event is fired (which should always show the tooltip as long as the condition results to true).

I don't know about other users but for me this is a pretty common use case and maybe there should be an easier way to set it up like that, like @pkozlowski-opensource suggested. :)

[herrherrmann]

Actually, there's still a problem with @pkozlowski-opensource's plunkr: As soon as the input field becomes invalid, the tooltip is still showing (and thus not properly updating). I'd really like to update it while the user is still using the input field, so the user learns about the (in-)validity as soon as the wrong character is typed.

Or in other words: the tooltip state should update whenever the $valid property updates (hope that's possible without using observers).

[icfantv]

@herrherrmann, we originally went with the tooltip route for form validation for my UI at work. But that was before realizing that Bootstrap (and Angular) already provide mechanisms for showing invalid and valid states.

From the ng2 docs on forms, you can add the following CSS:

.ng-valid[required] {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid {
  border-left: 5px solid #a94442; /* red */
}

Or, you can go the Bootstrap CSS route (this is a Formly template, but the concept is identical):

<div class="form-group"
     ng-if="!formState.readOnly || (formState.readOnly && (model[options.key] | hasLength))"
     ng-class="{'has-feedback': to.loading , 'has-error': options.validation.errorExistsAndShouldBeVisible}">
  <label for="{{ ::id }}"
         class="control-label"
         ng-if="::to.label"
         ng-class="::formState.horizontalLabelClass">
    {{ ::to.label }}
    <span ng-if="::to.required" class="text-red">*</span>
  </label>
  <div ng-class="::formState.horizontalFieldClass">
    <formly-transclude></formly-transclude>
  </div>
</div>

[herrherrmann]

Hi @icfantv, thanks for your answer but I don't see how that solves the tooltip not showing in the situations I mentioned. You are only suggesting styling/adding the proper bootstrap css classes to the form field which is already happening (since – as you mentioned – Angular is already providing the necessary validation states).

[icfantv]

Ahhh, I think I pasted the wrong template file. This is for telling the user what the error message is, right? I.e., what's wrong with their input? I would encourage a message below or next to the field using ng-messages. As I said, we went the tooltip route and there were a lot of corner cases and state management. If you want to go that route and use formly, I have the boilerplate stuff you would need.

If not, I think the easiest and proper way is to set the trigger to none and toggle the tooltip manually via the tooltip-is-open property. But note that you will need to watch the form states yourself.

[herrherrmann]

Thanks again, @icfantv!
I guess I'll just stick to using ng-messages. However, using tooltips as a reaction of user input in the way I described above could be a really nice use case on the long run.

[icfantv]

@herrherrmann, you can easily implement that in formly templates - if you don't use formly, you'll be doing a lot of the heavy-lifting yourself. we use ng-messages and display the error message below the input field. If you want to see how it looks, take a look at this - we've added animation so it slides and fades in and out.

[wesleycho]

IMO if we do add support for template specified triggers for more rich situations, we should support the object syntax for setting up the bindings.