Candyweb.us Tech Blog

NOTE: THIS ARTICLE RELATES TO JOOMLA 1.5. THE LATEST STABLE VERSION OF JOOMLA IS 3.1.

So I needed to add a "What's This?" tooltip to a Joomla form.

I'm using RSForm Pro (which I love!) for the form development and processing. I've added quite a bit of customization with $_Session variables, paypal scripting, forcing https protocol, and other fun things. This is what I'm really liking about RSForm Pro. It allows me to add any kind of custom code, but does all the tedious stuff that I don't want to. For anyone who needs more than a basic contact form, it's worth the 19 Euros (currently $27.44.) Check it out!

But back to the problem at hand...

Tooltips are supposed to come ready to use with Joomla 1.5. But I couldn't get mine to work. First, I stole the syntax from the administration panel, because I wanted to use a title and an image in the tooltip popup, instead of the standard title and text. So I looked at the template manager preview tooltips and got the following syntax:

<span class="editlinktip hasTip" title="Security Codes by Card:: <img border=&quot;1&quot; src=&quot;http://websiteiamworkingon.com/images/credit-card-security-codes.gif&quot; alt=&quot;&quot; width=&quot;447&quot; height=&quot;324&quot;/>"><a href="#" onclick="return false;">What is this?</a></span> 

At first I put this in the form layout tab of the RSForm Pro forms manager. But every time I saved the form and reopened the code, my " was converted into " and the tooltip would not work.
So I created a Free Text component in the Components tab and placed the sytax in the Text field, and cvv_tooltip in the Name field.

Then in the Form Layout tab I put the placeholder: {cvv_tooltip:body} in the proper place. No more quote conversions! But the tooltip was still not working. The popup text was in the form of a simple title tag, such as you might see on an image. Hmmm.

I did a little searching and found out what basic elements are behind the tooltip operation. This article was useful...Tutorial:How to add tooltips to your Joomla! website

Turns out that my template was missing some include code. Apparently the administration panel included everything, but the site template itself needed some help. So I browsed through the template code via the template manager in the Joomla Admininstration panel. To see the code, go to Template Manager, click on the name of your active template. Then click on the 'Edit Html' button in the upper right corner.

I found that I needed to add the following:

JHTML::_('behavior.tooltip');
?>
<script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
<?php

Then the tooltip feature worked! But...

The image in my popup was too big for the standard tooltip width.

So I needed some CSS customization. No problem!

I changed the code in my template file to the following:

$toolTipArray = array('className'=>'custom2');
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray);
?>
<script type="text/javascript" src="/newsite/includes/js/joomla.javascript.js"></script>
<?php

Then I added the custom2 classes to the template CSS file as mentioned in the Tutorial article. I bumped up the Title text size a little, and increased the width in .custom2-tip so that the CSS code added to the template_css.css file looked like this:

.custom2-tip {
 color: #000;
 width: 480px;
 z-index: 13000;
}
 
.custom2-title {
 font-weight: bold;
 font-size: 12px;
 margin: 0;
 color: #024A68;
 padding: 8px 8px 4px;
 background: #3CA0D0;
 border-bottom: 1px solid #024A68;
}
 
.custom2-text {
 font-size: 11px;
 padding: 4px 8px 8px;
 background: #63ADD0;
}

And that works very well!

Until Next Time...Sheena is done!