joomla tooltips on form field validation

Question

I have a Joomla module with a JForm having a few fields. I implemented client side validation for the field as described here: https://docs.joomla.org/Client-side_form_validation

I can also show a tooltip message for the fields when cursor is hovering above based on the below: https://docs.joomla.org/J3.x:How_to_add_tooltips_to_your_Joomla!_website

But I could not figure out yet how to show those tooltips ONLY when the user entered invalid data into the field.

What would be the best way to do this?

Thanks a lot!

Answer 1

I think the best way would be to use a custom class for the tooltip, and only do the javascript init on the form validation. e.g:

<span class="hasTipValidation" 
    title="My Tooltip Title :: Tooltip text for hasTipValidation class.">
    <input name="whatever" type="text" /></span>

and

<script type="text/javascript">
    ....
    var f = document.adminForm;
    if (!document.formvalidator.isValid(f)) {
        var JTooltips = new Tips($$('.hasTipValidation'), 
       { maxTitleChars: 50, fixed: false});     
    }
    else { 
       ...
    };
    ...
</script>

However imo, it's probably not a good idea, it's better to show the error directly before of after the field, without needing the user to hover on the field.