Another great mod from Ramil and vldCrowd. Best of all, it is FREE.
Tool Tip Pointer File for Registration Template (if you are not sure what it is, see image at bottom of page).
Download source files from here: http://www.filipina-lady.net/test253/tooltip.zip
1. Download source file, unzip it and put ext.hint.php in includes/ext/ folder . Also pointer.gif in your templates media folder
2. Add the following js query to misc.js file at includes/js/misc.js
function generate_hints()
{
$("input,select,textarea").focus( function(){
$(this).siblings("span").css('display','inline');
});
$("input,select,textarea").blur( function(){
$(this).siblings("span").css('display','none');
});
$("textarea").keydown( function(){
$(this).siblings("span").css('display','none');
});
}
3. Add the extension call into account_register.tpl for each static field. You add the call right before the closing </dd> for each field. For example for the email field after adding the tool tip it would look like this:
<dd><input type="text" class="text" id="field_email" name="email" value="{registration_email}" size="32" maxlength="64" />{hint:langarray="register",key="email"}</dd>
Where you add the code for dynamic fields is a little different.
In account_register.tpl locate this code: <!-- BEGIN profile_fields -->. At the end of <!-- BEGIN profile_fields --> there is a <!-- ENDIF --> code to close out <!-- BEGIN profile_fields -->. I started adding tool tip code for dynamic fields AFTER the closing <!-- ENDIF --> for <!-- BEGIN profile_fields -->. Note that there may be quite few lines between the opening <!-- BEGIN profile_fields -->. and the closing <!-- ENDIF --> In my case <!-- BEGIN profile_fields --> begain on line 64 and the closing <!-- ENDIF --> was on line 112.
For example, for inmyownwords field I would enter the tool tip hint in account_register.tpl right after the closing <!-- ENDIF --> for <!-- BEGIN profile_fields -->
<!-- IF field_label == "inmyownwords" -->
{hint:langarray="register",key="inmyownwords"}
<!-- ENDIF -->
The following image may help you with entering the tool tip for dynamic fields.
4. For image uploads, I had to find the following code in account_register.tp
<dd><input id="field_photo" type="file" name="photo" value="" class="text" />
and add the tool tip after the code so it looked like this:
<dd><input id="field_photo" type="file" name="photo" value="" class="text" />{hint:langarray="register",key="photo"}</dd>
5. Now I need to open lang.lib.account_register.php and add the hint for each field (can change the words to what you want)
FOR STATIC FIELDS
"hint_email" =>
"Enter correct email address please. We will send activation link to it.",
FOR DYNAMIC FIELDS
For dynamic fields (not in template but fetched from database) I would use the field label
"hint_age" =>
"Only adult persons allowed to use our site",
"hint_country" =>
"We have pepople from all over the world. Where are you from?",
"hint_inmyownwords" =>
"Describe yourself! Do not hesitate honey",
6. Now I need to put the following code at the bottom of account_register.tpl (note: I put it below <!-- INCLUDE footer.tpl -->)
<script language="javascript">
generate_hints();
</script>
7. Now we need to add some css to site.css
.hint {
display: none;
position: absolute;
left: 500px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
/* to fix IE6, I can't just declare a background-color,
I must do a bg image, too! So I'm duplicating the pointer.gif
image, and positioning it so that it doesn't show up
within the box */
background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(pointer.gif) left top no-repeat;
}
Note: may have to play around with the position left above to get the tool tip to display where you want.
For demo, you can use the sign up form at: Filipina Lady site Put your mouse in each field to see tool tip.
