How to add tooltips to your Joomla! website - Revision history

Jumpy972: /* Create a Tooltip with the JHTML::tooltip Method */

2012-02-29T13:35:20Z

‎Create a Tooltip with the JHTML::tooltip Method

Jerv13: /* Adding CSS Styling to the Tooltip */

2012-01-13T21:11:22Z

‎Adding CSS Styling to the Tooltip

Dextercowley: remove review tag

2011-09-15T15:37:47Z

remove review tag

Mvangeest: Made miscellaneous improvements

2011-01-14T19:40:26Z

Made miscellaneous improvements

Mvangeest: Tutorial:How to add tooltips to your Joomla! website moved to How to add tooltips to your Joomla! website: Moved page to main namespace because the Tutorial namespace is deprecated

2011-01-14T19:36:43Z

Tutorial:How to add tooltips to your Joomla! website moved to How to add tooltips to your Joomla! website: Moved page to main namespace because the Tutorial namespace is deprecated

Mrs.siam: /* Complete Code Example */

2010-09-10T19:27:08Z

‎Complete Code Example

Zwiastun: add letter: joomla

2010-04-29T11:07:12Z

add letter: joomla

Creuzerm: /* Customizing Your Yooltips */

2009-12-09T21:48:58Z

‎Customizing Your Yooltips

Dieter: /* Create a Tooltip Using a CSS Class Name */

2009-09-18T22:42:02Z

‎Create a Tooltip Using a CSS Class Name

Dextercowley: fix typo

2009-06-11T17:04:13Z

fix typo

@@ Line 22: / Line 22: @@
 == Create a Tooltip with the JHTML::tooltip Method ==
-One way to create a tooltip is using the JHTML::tooltip method. The API documentation is available at [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip]. The method definition is shown below.
+One way to create a tooltip is using the JHTML::tooltip method. The API documentation is available at [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#tooltip http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#tooltip]. The method definition is shown below.
 <source lang="php">
 void tooltip (string $tooltip, [string $title = ''], [string $image = 'tooltip.png'],

@@ Line 112: / Line 112: @@
 </source>
-If you have a custom CSS file, copy this code and alter it to your liking. Note that the <tt>.tool-title</tt> class uses by default the "selector-arrow.png" image. This is what gives the outline of the tooltip the little pointer in the upper left of the tooltip box. If you leave out a title in your tooltip, you will just get a rectangle, without the pointer.
+== Adding CSS Styling to the Tooltip Joomla v1.6+==
 == Customizing Your Tooltips ==

← Older revision		Revision as of 15:37, 15 September 2011
Line 1:		Line 1:
−	~~{{review}}~~
−
	A tooltips is a piece of text that pops up when you hover the mouse over a region on a website. If you use the Joomla! back end, for example, tooltips are used to help explain the action of different parameters, as shown in the screenshot below:		A tooltips is a piece of text that pops up when you hover the mouse over a region on a website. If you use the Joomla! back end, for example, tooltips are used to help explain the action of different parameters, as shown in the screenshot below:

@@ Line 1: / Line 1: @@
 {{review}}
-===Tooltips Overview===
 A tooltips is a piece of text that pops up when you hover the mouse over a region on a website. If you use the Joomla! back end, for example, tooltips are used to help explain the action of different parameters, as shown in the screenshot below:
@@ Line 7: / Line 7: @@
 Tooltips are a great way to give the user access to information without using up space on the screen. You can use basic tooltips just by adding a "title" attribute to a tag. However, this doesn't give you the option to style the tooltips. With Joomla! version 1.5, it is very easy to add styled tooltips to your site. This tutorial will show you how. <blockquote>''Note: If you are converting old code, make sure it doesn't use the prototype.js file.  That file will keep the tooltips from working.''</blockquote>
-===Activate Tooltip Behavior===
+== Activate Tooltip Behavior ==
 To start, you must activate the tooltip behavior.  This is done with the following line of code:
 <source lang="php">
@@ Line 23: / Line 23: @@
 This allows tooltips to function, as outlined below.
-===Create a Tooltip with the JHTML::tooltip Method===
+== Create a Tooltip with the JHTML::tooltip Method ==
 One way to create a tooltip is using the JHTML::tooltip method. The API documentation is available at [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip]. The method definition is shown below.
 <source lang="php">
@@ Line 65: / Line 65: @@
 Note that specifying the "$text" parameter will override any image you have passed to tooltip.
-===Create a Tooltip Using a CSS Class Name===
+== Create a Tooltip Using a CSS Class Name ==
 If we look at the HTML page source generated by the <code>JHTML::tooltip</code> function above, here is what we see:
 <source lang="html4strict">
@@ Line 83: / Line 83: @@
 will produce exactly the same effect as the <code>JHTML::tooltip()</code> example above.
-===Adding CSS Styling to the Tooltip===
+== Adding CSS Styling to the Tooltip ==
 The default tooltips, whether using the JHTML::tooltip method or class method, use the following three CSS classes: <tt>.tool-tip</tt>, <tt>.tool-title</tt>, and <tt>.tool-text</tt>.
@@ Line 116: / Line 116: @@
 If you have a custom CSS file, copy this code and alter it to your liking. Note that the <tt>.tool-title</tt> class uses by default the "selector-arrow.png" image. This is what gives the outline of the tooltip the little pointer in the upper left of the tooltip box. If you leave out a title in your tooltip, you will just get a rectangle, without the pointer.
-===Customizing Your Tooltips===
+== Customizing Your Tooltips ==
 Ok, now it's time to have some fun. The <code>JHTML::_('behavior.tooltip')</code> can take two optional parameters. The first parameter is the name of the CSS class that will be used to identify the tooltip. As we saw earlier, this defaults to "hasTip". The second optional parameter is an array of parameters that you can use to fine-tune the tooltip functionality. These are explained below.
 * '''maxTitleChars:''' The maximum length of the title (the part of the "title" attribute before the "::")
@@ Line 126: / Line 126: @@
 In the next section, we'll show how to use these parameters with some examples.
-===Tooltip With Different Classes===
+== Tooltip With Different Classes ==
 In this example, we will create a tooltip using different selector and tooltip styling classes. Why might we want to do this? One reason would be if we had different types of tooltips and we wanted to style them differently.
@@ Line 175: / Line 175: @@
 So we can see the effect of the parameters that we passed to the <code>JHTML::_('behavior.tooltip')</code> method.
-'''offsets Parameter'''
+=== offsets Parameter ===
 <blockquote>''Note: The "offsets" parameter doesn't work in version 1.5.9 and earlier because of a bug. As of version 1.5.10 it should work as outlined below.''</blockquote>
 You can control the x and y distance, in pixels, from the cursor to the tooltip using the "offsets" parameter. This parameter must be an array as shown in the example code below:
@@ Line 184: / Line 184: @@
 </source>
-===Using an External Javascript File===
+== Using an External Javascript File ==
 There are times when you might prefer to work with a separate Javascript file. This gives you complete flexibility to use all of the mootools capabilities. To do this:
 # Create the separate Javascript file and save it somewhere in your Joomla! site (for example, "templates/<your template>/js/yourjsfile.js".
@@ Line 196: / Line 196: @@
 This will load your script into the document and make sure that the MooTools library is available.
-===Complete Code Example===
+== Complete Code Example ==
 Here is an example that incorporates all of the elements discussed in this tutorial. So you can see the code in action, we will create an override of the "mod_stats" Module and add our test code there. We will use the rhuk_milkyway template.
@@ Line 325: / Line 325: @@
 Notice that <tt>.custom2-title</tt> and <tt>.custom3-title</tt> classes do not have a background property. So these tooltips will be a box without the neat little arrow pointing at the mouse. If you wanted, you could create an image similar to "templates/system/images/selector-arrow.png" of the right color and add that as a background to these classes.
-===Example Code Screenshots===
+== Example Code Screenshots ==
 Here are some screenshots taken from the sample code above. The first screenshot shows the modified "mod_stats" modules with our sample code.
 [[Image:Screen_tooltip_example2_20090210.png|center|frame]]
@@ Line 333: / Line 333: @@
 [[Image:Screen_tooltip_example3_20090210.png|center|frame]]
-===More Information===
+== More Information ==
 More information about the topics covered in this tutorial is available at the links below. Note that Joomla! version 1.5 uses MooTools version 1.11. The current version of MooTools is 1.2.
 * Joomla API - [http://api.joomla.org http://api.joomla.org]
@@ Line 341: / Line 341: @@
 [[Category:Development]]

@@ Line 205: / Line 205: @@
 JHTML::_('behavior.tooltip');
 $toolTipArray = array('className' => 'custom2', 'showDelay'=>'500', 'hideDelay'=>'500',
-    'fixed'=>'true'
+    'fixed'=>true
     , 'onShow'=>"function(tip) {tip.effect('opacity',
          {duration: 500, wait: false}).start(0,1)}"

@@ Line 36: / Line 36: @@
                 'http://www.joomla.org');
 </source>
-The above will make a tooltip using the default "tooltip.png" image, as shown below.[[Image:Tooltip_tutorial_example_screenshot_20090208.png|center|frame]]Clicking the image will take you to <tt>http://www.joola.org</tt>, since that is the "$href" argument. The HTML source for this tooltip is as follows:
+The above will make a tooltip using the default "tooltip.png" image, as shown below.[[Image:Tooltip_tutorial_example_screenshot_20090208.png|center|frame]]Clicking the image will take you to <tt>http://www.joomla.org</tt>, since that is the "$href" argument. The HTML source for this tooltip is as follows:
 <source lang="html4strict">
 <span class="editlinktip hasTip" title="Tooltip title::This is the tooltip text" >

@@ Line 131: / Line 131: @@
 Here is the code to create the tooltip Javascript function:
 <source lang="php">
-$toolTipArray2 = array('className'=>'custom2');
+$toolTipArray = array('className'=>'custom2');
 JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray);
 </source>