Tool Tip Registration Mod

An article by VldMods    2 Comments

How to make a tool tip registration  for your vldpersonals site.
A great tutorial made of db3204 on vldcrowd.
and the mod is made of radioact.

Now when a new member signs up
and puts their mouse in a registration field,
instructions for that field pops up.

You can read comments and full tutorials how to do here.
 
[spoiler]
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” 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=”” />
 
and add the tool tip after the code so it looked like this:
 
<dd><input id=”field_photo” type=”file” name=”photo” value=”” />{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.
[/spoiler]