frontend tooltips

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:


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?

Hi Kai920,

In Joomla 1.5.x use

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

Bob

Talk about a lightning fast response! Cheers🙂

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.

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,

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:

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

and what is mentioned in the above thread?

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.

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

JHTML::tooltip('This is the tooltip text', 'Tooltip title', 'tooltip.png', '', '', false);

Bob

Right you are - again🙂

Onward to trying to expand the tooltip box.

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

JHTML::_('behavior.tooltip'); 

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

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

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

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:

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

by changing to

$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

Great Component!
I see that this method works for 1.5, what is the method for applying tooltips for Joomla 1.0 templates?

Hi microdave,

The equivalent code in Joomla 1.0 was

<?php echo mosToolTip( "tootip text" ); ?>

Bob

Hi Bob,

First time here ... after trying many other form extensions I have settled on Chronoforms. It's terrific. Kudos to you and all involved. I have forms up and running but am stuck on the fronted tooltips. (As you will see, I'm not strong on code.) I got the tooltip working but I can't seem to get it where I want it. I'm using your code (below)

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

... and I want to place the tooltip just before the field label "Purpose of Loan" (see below) but can't seem to do it. Your help will be greatly appreciated.

<td style="font-family: Verdana; width: 154px; vertical-align: middle;"><span
 style="font-family: Palatino Linotype;">Purpose of Loan</span></td>

welcome alasitis,

try this:

    <td style="font-family: Verdana; width: 154px; vertical-align: middle;"><span
    style="font-family: Palatino Linotype;">    <?php echo JHTML::_('tooltip', "This is the Form name, It must be Unique." ); ?>Purpose of Loan</span></td>

Cheers
Max

Thanks, Max, for the very quick reply. It worked! I think I saw something here about making the tooltip a bit fancier so I'll look for that next. Thanks again ...