Hire us to design your site.
Jul
11
2011

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.
 
[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]

VldMods

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

    Like or Dislike: Thumb up 0 Thumb down 0

    • VldMods

      please contact me and we can talk about it …

      Like or Dislike: Thumb up 0 Thumb down 0

Clients Testimonials

Peter
Thanks for your help and a great support my site works fine now ... no matter how often I had ask for your support you have kindly answered all of my questions ... I recommend you. I vote 5 stars for you. 5 of 5 stars

Peter

About VldMods

Welcome to vldMods here we will try to connect all free and pay mods for vldpersonals 2.5.3 and newer.

You can now translate VldMods in 50 different languages.

Translate a post then you Continue Reading »

Add your vldpersonals site here.

Sponsor/Donate to VldMods

I hope you like VldMods if you sponsor me I can make it even better ;) Thanks.

Find Us On Facebook

VldMods Newsletter

Subscribe to VldMods Newsletter a confirmation email will be sent to you!
This is a good way to be informed about our tutorials and news.

VldMods Polls

Should We Have Php Tutorials For Beginners?