-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Tooltip-trigger "input" hides the tooltip on every second keystroke #5221
Comments
It does exactly what you've asked it to do - that is - use 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 |
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. |
Ah ok, thank you for clarifying and providing the workaround! 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. :) |
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). |
@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:
Or, you can go the Bootstrap CSS route (this is a Formly template, but the concept is identical):
|
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). |
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 If not, I think the easiest and proper way is to set the trigger to |
Thanks again, @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 |
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. |
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 settooltip-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.
The text was updated successfully, but these errors were encountered: