Posted: 08/11/2009 07:41 AM
Tool Tip Registration Mod
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.
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.
629
8
4






Comments
To keep things organized, inside the language file I was prefixing my help tips with "help_"
eg.,
"help_[field]" => "Say something in here",
When I looked a little deeper, the ext. was automatically prefixing 'help_' to the $key, so inside the ext. my $key was now being generated as "help_help_[field]"
Because this key does not exist in the language file, no tip was being generated.
A minor edit to the ext. was all that was needed to stop this auto. prefixing of the $key, and now it's working fine.
Can someone confirm this works on 2.5.5 before try and dig deeper...
{hint:langarray="custom",key=field_label} and it seems to have worked.
If there is no field hint defined in the language file, nothing gets displayed, however if a hint is defined then the hint displays.