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.
Previous post: Making Money
Next post: Front End Pagination Mod

Comments

by fatlizard 01/13/2010 10:18 PM
After digging a little deeper I found the source of the problem.
 
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.
by gugu 01/12/2010 03:51 PM
I have it on 2.5.5 and it work like a charm ...
by fatlizard 01/12/2010 05:32 AM
Tried this in 2.5.5 but <div>'s aren't being generated.
 
Can someone confirm this works on 2.5.5 before try and dig deeper...
by radioact 11/04/2009 09:40 PM
Agree with Idealist, and that's how I always use it - without IFs.
by madirfan 11/04/2009 06:21 AM
WORKS SUPER!
by gugu 10/16/2009 04:18 AM
very good tutorial dan ...
by idealists 10/16/2009 12:43 AM
Rather than doing a big IF statement, for the dynamic fields, I did:
{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.
by radioact 08/11/2009 07:18 PM
And we can also use it for account_profile page, and even for settings page etc.
Add Comment


You have 1500 characters left We would not recommend you trying hard while expressing your opinion because you are not signed in and comment will not be saved.

Latest visitors

misulicus godyn gugu
johnwh antoniopuntieri WaterSpirit
dael24 delpho Like_Geo

db3204's RSS

Subscribe to db3204's Blog  RSS