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.







Comments
Gukkie87
<span id="field_username_status" class="info wide" style="display:none"></span>
showing after u focus onto the username field again, here's a fix.
Put the codes for the username in the order:
{hint:langarray="register",key="username"}
<span id="field_username_status" class="info wide" style="display:none"></span>
And REPLACE all the "siblings" in the javascript code to "next".
eg. $(this).next("span")...
gugu
@ desperatesailors: that version had you on your site ?
desperatesailors
The deviation:
instead of adding the code into the misc.js, I saved the code as a new file called it hints.js and then added the following into the header.tpl just below the call for the misc.js
<script type="text/javascript" src="{virtual_path}includes/js/hints.js"></script>
I did this so that I could add the hint to any page.
Does anyone have any clues as to what I might have done wrong?
fatlizard
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.
gugu
fatlizard
Can someone confirm this works on 2.5.5 before try and dig deeper...
radioact
madirfan
Pages
1 2Log in to leave a comment