Formhandler › How to add tooltips to your form fields

How to add tooltips to your form fields

Using Formhandler there is no need for special markers or other configuration to add tooltips or help messages to your form fields.

It is even easier when you use a master template. Just add a container for your tooltips to the subparts for the form fields and put a translation marker in it.

###field_input###
<label for="id-###fieldname###">###LLL:label-###fieldname###### ###required_###fieldname######</label>
<input type="text" id="id-###fieldname###" name="###formValuesPrefix###[###fieldname###]" value="###value_###fieldname######" />
<div class="tooltip">###LLL:tooltip-###fieldname######</div>
###field_input###

The nested markers ###LLL:tooltip-###fieldname###### are perfect to generate the translation markers for each form field.

Imagine the following HTML template:

<!-- ###TEMPLATE_FORM1### -->
<form action="###REL_URL###" method="post">
###master_firstname###
###master_lastname###
###master_email###
###master_phone###
###master_submit###
</form>
<!-- ###TEMPLATE_FORM1### -->

The replaced subparts of the master template contain translation marker for your tooltips:

###LLL:tooltip-firstname###
###LLL:tooltip-lastname###
###LLL:tooltip-email###
###LLL:tooltip-phone###

Now you have to add these translations to your transltion file:

<label index="tooltip-firstname">Enter your first name here!</label>
<label index="tooltip-lastname">Enter your last name here!</label>
<label index="tooltip-email">Enter your email address here! This must be a valid email address!</label>
<label index="tooltip-phone">Enter your phone number! Example: 05/23498355</label>

The styling is up to you. If you want, add JavaScript code to add some fancy show/hide effects. Whatever you like.