This simple yet useful extension+modification was inspired by forum posts of Fusion6, Linda; original control panel's {help:} (tip) extension and this blog post:
http://www.askthecssguy.com/2007/03/for … s_and.html
I borrowed .css styling there.
Although author of that post permited also freely use of Javascript I rewrited using beautiful jQuery which installed by default in our vldP systems.

Ok, let's start:

0. Go to above site and try the demo, read concept, decide if it's what you need.
1. Download my source file, unzip archive and put ext.hint.php to your includes/ext/ folder.
2. Copy/paste this javascript jquery code to the end of your /includes/js/misc.js file:

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 extension call(s) into your account_register.tpl file for generating <span>Enter correct email address please...</span> like hints.

{hint:langarray="register",key="email"}

(somewhere afther <input name="email"> tag, right before closing </dd>
Extension will use your languages/english/lang.lib.account_register.php as file for getting hints and will seek for key 'hint_email' in it (prefixing your key parameter with 'hint_' string) .
4. So please add in it:

"hint_email" => 
"Enter correct email address please. We will send activation link to it.",

If you won't provide langarray= parameter extension will seek in lang.custom.php file (for those who want to keep all hints in one file).

5. Add javascript jquery function call at the bottom of your .tpl file but before <!-- include footer.tpl --> part:
    <script language="javascript">
    generate_hints();
   </script>

6. Put this code to bottom of one of your templates .css files. Let's say to site.css

/* The hint to Hide and Show */
.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;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}

Later adjust horisontal positioning of your tooltip over left: attribute of .hint selector.

7. And also place pointer.gif file to media folder of your template.

8. Go to your website and try to regsiter. Press couple of times F5 to make sure you've uploaded new .js and .css
Click on first email field.

Don't go celebrate yet!

Notice: It works fine with input, select, textarea type fields (checkboxes, radiobuttons not supported)
Here is best pactice I recommend:
9. Use it on registration and profile editing page.
10. Use it for dynamic fields right before </dd>

...
            {hint:langarray="register",key=field_label}
            </dd>
    <!-- END profile_fields -->

Open your language file and add all nessessary values.

"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",

... etc...

If you have extension call but do not have language key=> value in file it's ok! No errors will happen.

Your new users will definitely appreciate the way you humanized signup process and will gladly give you their money!

Good luck!

Last edited by radioact (2009-07-14 10:39:56)