frontend tooltips

Post any questions you may have here

frontend tooltips

Postby kai920 on Thu May 15, 2008 8:44 am

I searched the forum and couldn't find anything - I believe this could be useful for guiding users on how to fill out your forms.

These "tips" would be either:

a) javascript tooltips on hover; or
b) a message displayed in the browser's status bar; or
c) both?

In the chronoforms backend, tooltips are already implemented:
Image

How difficult would it be to get this functionality built into the form for the frontend?

I found some js scripts (for example - here) but if the capability already exists within CF or Joomla, that would be the way to go.

How would we go about using option (b): status bar message depending how which input field was active? I suppose this would be js of some sort as well?
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby GreyHead on Thu May 15, 2008 8:52 am

Hi Kai920,

In Joomla 1.5.x use
Code: Select all
<?php echo JHTML::_('tooltip', "This is the Form name, It must be Unique." ); ?>
Bob
Bob Janes
info at greyhead.net
ChronoForms Support If you like ChronoForms please vote or post a review at Joomla.org
User avatar
GreyHead
Platinum Boarder
 
Posts: 3176
Joined: Tue May 29, 2007 10:15 pm
Location: Brittany

Re:frontend tooltips

Postby kai920 on Thu May 15, 2008 8:56 am

Talk about a lightning fast response! Cheers :)
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby kai920 on Thu May 15, 2008 9:03 am

PS. Do you know where the CSS is for the tooltip popup? If it's possible I need to make the box height higher to accomodate for more text.
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby GreyHead on Thu May 15, 2008 9:12 am

Hi Kai920,

It's in root/libraries/joomla/html/html.php around line 256, or you can use class="editlinktip hasTip" to set your own css I guess.

Bob
Bob Janes
info at greyhead.net
ChronoForms Support If you like ChronoForms please vote or post a review at Joomla.org
User avatar
GreyHead
Platinum Boarder
 
Posts: 3176
Joined: Tue May 29, 2007 10:15 pm
Location: Brittany

Re:frontend tooltips

Postby kai920 on Thu May 15, 2008 1:04 pm

Bob,

I've been trying to gain an understanding of tooltips. I found a nice tutorial on the Joomla Forums. What is the difference between your code:

Code: Select all
<?php echo JHTML::_('tooltip', "This is the Form name, It must be Unique." ); ?>



and what is mentioned in the above thread?

Code: Select all
JHTML::tooltip(‘This is the tooltip text’, ‘Tooltip title’, ‘tooltip.png’, ‘’, ‘’, false);


I got an unexpected T_STRING error with the second if I just plug it into the form... specifically I guess my question is what is the difference between JHTML::_('tooltip'... and JHTML::tooltip?

I appreciate any insight you may provide.
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby GreyHead on Thu May 15, 2008 2:20 pm

Hi kai920,

Pass, Joomla 1.5 has some very sketchy documentation still. I think that the _( version is probably a short-hand.

I think your T-STRING error may be because you have curly quotes in there. Try
Code: Select all
JHTML::tooltip('This is the tooltip text', 'Tooltip title', 'tooltip.png', '', '', false);
Bob
Bob Janes
info at greyhead.net
ChronoForms Support If you like ChronoForms please vote or post a review at Joomla.org
User avatar
GreyHead
Platinum Boarder
 
Posts: 3176
Joined: Tue May 29, 2007 10:15 pm
Location: Brittany

Re:frontend tooltips

Postby kai920 on Thu May 15, 2008 2:24 pm

Right you are - again :)

Onward to trying to expand the tooltip box.
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby kai920 on Fri May 16, 2008 3:47 pm

Final note: I found that after I added this line of code, I could style my tooltips with CSS.

Code: Select all
JHTML::_('behavior.tooltip');
kai920
Senior Boarder
 
Posts: 44
Joined: Thu Mar 20, 2008 4:00 pm

Re:frontend tooltips

Postby marald on Thu Jun 12, 2008 5:03 pm

Hi to all,

first of all, thanks for this great component!
My client should be buying it soon, so we have a registered version of the component on our site.

I've been trying to get the tooltips working in IE6 & IE7 but keep just showing the text "tooltip". Although it works perfectly in firefox and safari and opera.

Also IE6 & IE7 both give javascript errors on the page, but at the mentioned line and char number is no javascript located???? :(

I've tried changing templates, switching off all other javascript in modules/pages/templates but still no go.
The wierdest thing is, that in the chronoform backend, the tooltips do work on IE6 and IE7. Even after comparison of the source code of the backend page and frontend, I can't figure out what is causing this problem.

Any help would greatly be appreciated.

Joomla 1.5.3 / Virtuemart 1.1 / Chronoforms 2.5 RC3.1
marald
Fresh Boarder
 
Posts: 2
Joined: Thu Jun 12, 2008 12:01 pm

Re:frontend tooltips

Postby GreyHead on Fri Jun 13, 2008 12:14 pm

Hi marald,

That sounds like there's a small JavaScript conflict with something else that's being loaded on the front-end but not on the back-end. You could try turning things off until the problem goes away. At least then you'd have some idea where the problem is.

The Tooltip is standard Joomla so the problem is most likely with the template or a module.

Bob
Bob Janes
info at greyhead.net
ChronoForms Support If you like ChronoForms please vote or post a review at Joomla.org
User avatar
GreyHead
Platinum Boarder
 
Posts: 3176
Joined: Tue May 29, 2007 10:15 pm
Location: Brittany

Re:frontend tooltips

Postby GreyHead on Fri Jun 13, 2008 12:22 pm

Hi marald,

I just answered this somewhere else, I can see that you've done some other testing though. The tooltips are Joomla code, I think that they should work but de-bugging JavaScript in is not easy - good luck!

Bob
Bob Janes
info at greyhead.net
ChronoForms Support If you like ChronoForms please vote or post a review at Joomla.org
User avatar
GreyHead
Platinum Boarder
 
Posts: 3176
Joined: Tue May 29, 2007 10:15 pm
Location: Brittany

Re:frontend tooltips

Postby marald on Fri Jun 13, 2008 1:05 pm

Thanks Bob, for your quick reply.

And yep, it was definately a conflict. And I finally found it :laugh: (after spending too many hours on it yesterday and today), but today I found out that when validation was selected in the chronoform the menusysteem (either suckerfish or moomenu) wouldn't work anymore either.

It didn't changed if I used prototype lib or mootools lib for validation, and as stated above changing from suckerfish to moomenu didn't change it either.

Now I found a combination that does work, in IE6/IE7 and Firefox. Menu's work, tooltips work (although I had to do some adjustment for IE)

Here's the config: (for other users who may run into these problems)

- Joomla 1.5.3
- Virtuemart 1.1
- Chronoforms 2.5 RC3.1

Rockettheme template (completly modified)

using following settings:

- mootools for validation in chronoforms
- MooMenu for menu system
- running mootools 1.11 (included in rockettheme)

disable in chronocontact component the mootools 1.11 entry.
(line 45 in chronocontact.html.php)

and in IE6 & IE7 I still had an alt text saying "tooltip" besides the tooltip that was showing, to fix this I removed alt text in this line:

Code: Select all
$text    = '<img src="'. $image .'" border="0" alt="'. JText::_( 'Tooltip' ) .'"/>';


by changing to

Code: Select all
$text    = '<img src="'. $image .'" border="0" />';


in the file html.php (libraries\joomla\html\html.php)

that's about it.

Okay, I'm getting back to the website..


Marald
marald
Fresh Boarder
 
Posts: 2
Joined: Thu Jun 12, 2008 12:01 pm


Return to Questions & Answers

Who is online

Users browsing this forum: Alexa [Bot], Yahoo [Bot] and 3 guests

cron