How do I use a custom Tooltip Text for Invalid Input Pattern instead of "You must use this format: [blank]"

Question

When the input does not match the pattern specified by the pattern attribute, Firefox simply says, "Please match the requested format", which is okay; however, when this validation fails Internet Explorer 10 displays "You must use this format:" in a tooltip with nothing else. This may be simple, but searching has not yielded me a clue as to how to supply text to the tooltip telling it the pattern that should be used.

Example below for a one to four digit number:

<input id="institution_threshold_days" type="text" placeholder="0-9999" pattern="^[0-9]{1,4}$" />

Answer 1

Try using the title attribute to describe what you want it to say:

<input id="institution_threshold_days" type="text" placeholder="0-9999" pattern="^[0-9]{1,4}$" title="Please enter a number less than 10000." />

Should work for all major browsers...

From Microsoft

the content of the title attribute is both shown as tooltip text for the field and appended to the generic pattern mismatch error message.

From Mozilla

Use the title attribute to describe the pattern to help the user.

And although I cannot find official documentation, it appears to work in Chrome as well.