1

Note that I've already read Enable angular-ui tooltip on custom events and, while close, does not do exactly what I want.

Here is as far as I got:

http://plnkr.co/edit/12R5eIj2v8nEj8LNVKr1?p=preview

Need to somehow update the error message based on the actual error (my code just has the message for min length not being met). Also, would like to somehow pop up a different tooltip when they first enter just to provide some helpful advice while filling out the form.

Here is what I want (at a minimum):

  1. A user clicks or tabs into a field, e.g., password, and begins typing. He only types four (4) characters and then tabs out of the field. Because four is less than our minimum of eight (enforced by ng-minlength="8" on the input) the tooltip should display to the right of the field.
    1. This tooltip should remain visible until the user corrects his error; he should not have to leave the field for the tooltip to disappear.
    2. If the user leaves the field, the tooltip should remain visible (until he revisits/corrects the error).
  2. Other errors, such as the password being too long, not containing the right characters, etc. should be shown in the tooltip when applicable.
    1. Let's say the user gets to 8 characters, but they're all lowercase (and the pattern requires mix of upper, lower, and numbers) -- the tooltip should then read "Your password must contain at least one of each of the following: lower case letter, upper case letter, and digit."
    2. The way this is currently done w/baseline AngularJS validation is by adding something like <p ng-show="formName.password.$error.pattern" in addition to the <p ng-show="formName.password.$error.minlength" class="help-block">, etc.

Here are nice to haves:

  1. The field that has an error (and thus, tooltip display to right) be shown with a red border.
  2. For fields requiring an explanation, another/different informative tooltip is shown as soon as the field is entered; the user does not have to type anything nor does he have to leave the field before this tooltip should be shown.
    1. This tooltip would simply explain what the user should be doing in that field, e.g., "Your password should be at least 8 characters and must contain at least one of the following: lower case letter, upper case letter, and a digit." The explanation is optional and not all fields would have it.
    2. Please keep in mind that this, while similar to the error text, is not the same text. When there's an error on length, we'd say just that, e.g., "Your password needs to be at least 8 characters."

EDIT: Apparently it's not clear to one commenter that I've tried to do this myself and failed. In the link I posted (i.e., the "Enabled angular-ui tooltip on custom events"), there's an example tooltip-trigger that reads: tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}". The issue with this, as I commented in that question, is that the user has to click back to the field to see the tooltip. It should instead, to be intuitive, appear as soon as the user leaves the field.

Community
  • 1
  • 1
Patrick
  • 1,484
  • 2
  • 12
  • 18
  • Have you done any research or tried any code? No one is going to write the code for you. https://docs.angularjs.org/api/ng/directive/form would be a good place to start. – dkiefer Oct 29 '14 at 19:56
  • @dkiefer thanks for the entirely unhelpful comment. I have already read the link you posted, followed other examples, and, of course, tried it myself. Your link has zero relevance to tooltips and, if you read my full example, you'll see I already have learned how to do the built-in AngularJS client-side validation (i.e., my reference to ng-show with form.field.$error...). Perhaps I should have changed "I've already read" to "I've already read and tried to modify the code to suit my needs"? – Patrick Oct 29 '14 at 20:03
  • But you're not asking a question, you're giving a list of requirements. You might as well hire a freelancer. – dkiefer Oct 29 '14 at 20:09
  • 1
    So restating the requirements in the form of a question is a clearer way to express the issue? What is this, Jeopardy? – Patrick Oct 29 '14 at 20:12

1 Answers1

0

It should instead, to be intuitive, appear as soon as the user leaves the field.

So then use blur instead of focus:

tooltip-trigger="{{{true: 'blur', false: 'never'}[registerForm.password.$invalid]}}"

You can also use keyup to show it immediately while you are on the field but it's not so smooth since it keeps re-rendering (which can be alleviated a bit using ng-model-options debounce)

JoseM
  • 4,302
  • 2
  • 24
  • 35