Hire us to design your site.

Tool Tip Registration Mod

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.
Download source files from here: http://www.filipina-lady.net/test253/tooltip.zip

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(){
$(“input,select,textarea”).blur( function(){
$(“textarea”).keydown( function(){
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” –>
<!– 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)
“hint_email” =>
“Enter correct email address please. We will send activation link to it.”,
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”>
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.

About the Author: gugu

Hey ... I´m the owner of this site ;) If you need help customize your vldpersonals site. Please ask me and I will try to help you. Enjoy reading !

2 Comments + Add Comment

  • hello,

    not possible to do the same but the password and speudo thank you

    I am French

    • please contact me and we can talk about it …