Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

Creating Form Tooltips instead of Green Box Popups 06 Feb 2013 11:23 #6650

A general tip for newbies out there...

If you want to have a form field message in a tooltip rather than that big green message box...

1) Create your form as usual in JCook. Ad your tool tip text in the table, field properties > Messages Tab > Information.
2) Install your new component
3) Edit administrator/components/com_mycomponent/models/forms/myform.xml
4) Find the field you want the tooltip and change
msg-info="MESSAGE_REF_HERE"
to
description="MESSAGE_REF_HERE"

5) Edit administrator/components/com_mycomponent/css/validationEngine.jquery.css and format a tooltip icon
.fieldsform label.hasTip {
	background-image: url(../images/icon-16-info.png);
	padding-right:16px; 
	background-position: right center;
	background-repeat: no-repeat;
	width:124px;
}
(You might have to mess around with the width depending on your form)

6) Create your 16px icon and place it in administrator/components/com_mycomponent/images/icon-16-info.png

For more info see...
www.j-cook.pro/forum/9-coding-inside-you...stylingbehavior#5641
www.j-cook.pro/forum/9-coding-inside-you...alidationengine#6090

I find Tool tips are particular handy when the form field is small and you need a lot of text in the tip. Tips also don't crowd the page like permanent messages.

It would be fantastic if this was an option in JCook someday. Chef - it would mean just changing "msg-info" for "description" in the form XML generator. ;)

Hope that helps,
Cheers
Just call me Chris :)
The following user(s) said Thank You: BTB300, edwardcox, dyoungers

Please Log in or Create an account to join the conversation.

Last edit: by organicwebs.
  • Page:
  • 1
Time to create page: 0.070 seconds

Amazing Tool !
And only tool I know that allows complete Scaffolding in terms of component creation. It really saves loads of time (actually much more than that). Simple architecture enables quick and painless changes at any time. Code is clean and consintent. It's just... what's the word... neat! :) Great work! You should definetely try this one!

pi_wo (JED)
         

Get Started