[Tutorial Draft] Tooltips

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

[Tutorial Draft] Tooltips

Post by Aikidoka » Thu Jun 28, 2007 1:23 pm

Ian asked me to throw this together as I was figuring out tooltips the other day.  Any feedback would be greatly appreciated.

If you are converting old code, make sure it doesn't use the prototype.js file.  That file will keep the tooltips from working.

To start, you must activate the tooltip behavior.  This is done with the following line of code:

Code: Select all

JHTML::_('behavior.tooltip');
The built-in Joomla method

The easiest way to create a tooltip is using the JHTML::tooltip method..  The api docs should be here.  http://api.joomla.org/Joomla-Framework/ ... ml#tooltip  However here is the method definition.  For those unfamiliar with method definitions, the brackets mean the parameter is optional.  The equals specifies the default if you do not pass that parameter.

Code: Select all

void tooltip (string $tooltip, [string $title = ''], [string $image = 'tooltip.png'], [string $text = ''], [string $href = ''], [boolean $link = 1])
The following is a basic tooltip.  Keep in mind that the image variable must be in reference to ‘includes/js/ThemeOffice’.  Use the prefix ‘../../../’ to reference from the root of the Joomla installation.

Code: Select all

JHTML::tooltip(‘This is the tooltip text’, ‘Tooltip title’, ‘tooltip.png’, ‘’, ‘http://www.joomla.org’);
The above will make a tooltip on the tooltip.png image.  Clicking the image will take you to http://www.joola.org.

Code: Select all

JHTML::tooltip(‘This is the tooltip text’, ‘Tooltip title’, ‘tooltip.png’, ‘’, ‘’, false);
The above is almost the same except the image will not be a link.

NOTE: Specifying the $text parameter will override any image you have passed to tooltip!

Creation by class name

That is the easy way to do it.  You can also apply the “hasTip” class to something to make it a tool tip.  This will make it possible to easily do your own custom tips later.  I’ve adapted information here from the mootools demo.

Code: Select all

<span class="hasTip" title="My Tooltip Title :: Here is my tip\’s text">Mootools.net</span>
This produces a tool tip on the span.  The title attribute specifies what is in the tool tip.  The format is “Tip Title::Tip Text”.

Designing the tooltip

The default toottips, whether using the JHTML::tooltip method or class method, use the following three CSS classes:
.tool-tip
.tool-title
.tool-text

Here are the default styles.

Code: Select all

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}
Dump this into your custom CSS file if you have one and alter it to your liking.

Customizing your tooltips

Ok, time to get down and dirty.  This is based on the mootools demo.  Don’t want anybody to think I discovered it on my own!  Now we are going to make our own tip definitions that include a very cool fade in and out.  First create a JavaScript file or simply put this code directly into your code.  Pick a name for the class to use.  I used “zoomTip” as I was playing with Zoom Gallery while learning this.

Code: Select all

window.addEvent('domready', function(){
	//do your tips stuff in here...
	var zoomTip = new Tips($$('.zoomTip'), {
		className: 'custom', //this is the prefix for the CSS class
		initialize:function(){
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
		},
		onShow: function(toolTip) {
			this.fx.start(1);
		},
		onHide: function(toolTip) {
			this.fx.start(0);
		}
	});
});
I’m only going to cover one line of that code here.  Please look over the mootools library for more information.  I read in their forum that their slider library is not compatible with the tooltips.  The 4th line is the prefix for the CSS classes that will be used.  In this example the classes will be the following:
.custom-tip
.custom-title
.custom-text

Here is some example CSS straight from the mootools demo.

Code: Select all

.custom-tip {
	color: #000;
	width: 130px;
	z-index: 13000;
}
 
.custom-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #3E4F14;
	padding: 8px 8px 4px;
	background: #C3DF7D;
	border-bottom: 1px solid #B5CF74;
}
 
.custom-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: #CFDFA7;
}
Notice that .custom-title does not have a background property.  This tool tip will be a box without the neat little arrow pointing at the mouse.  If you wanted to change the colors in the box and use the arrows you would have to alter the image to have the color you want and add that property into your .custom-title CSS.  Now you must create the items using the class method and not using JHTML::tooltip.  JHTML::tooltip applies the classes “editlinktip” and “hasTip”.  I have not seen any way to easily alter that.  The code below will create a tip using this new js code.

Code: Select all

<span class="zoomTip" title="My Tooltip Title :: Here is my tip\’s text">Mootools.net</span>
Notice the only difference from the previous example using a span is the class name.

Created 6/28/2007

So there is what I discovered the past couple of days.  I'll edit this as things come up and/or corrections are made.

Joomla API - http://api.joomla.org
Mootools - http://www.mootools.net/
Mootools demos - http://demos.mootools.net/
Last edited by Aikidoka on Thu Jun 28, 2007 5:24 pm, edited 1 time in total.

User avatar
mjaz
Joomla! Guru
Joomla! Guru
Posts: 821
Joined: Thu Nov 10, 2005 10:08 am
Contact:

Re: [Tutorial Draft] Tooltips

Post by mjaz » Wed Jul 18, 2007 9:16 am

Thanks, excellent tutorial!
Better SEO & multi-lingual Joomla sites with Nooku Content
http://www.nooku.org
Nooku Framework for advanced Joomla extension development
http://www.nooku.org/framework

xuanhau
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Tue Dec 20, 2005 4:04 am
Location: VN
Contact:

Re: [Tutorial Draft] Tooltips

Post by xuanhau » Sat Feb 23, 2008 10:00 am

but, I can't do that if I want more than tooltip style on the same page. Help me.

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by Aikidoka » Sun Feb 24, 2008 4:21 pm

I'm not sure what you are asking, but if you are trying to do more than one tooltip style per page I would think you could do it with custom styles. I have not actually tried it though.

xuanhau
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Tue Dec 20, 2005 4:04 am
Location: VN
Contact:

[SOLVE]: [Tutorial Draft] Tooltips

Post by xuanhau » Mon Feb 25, 2008 10:30 am

Thanks,
I try custom style and solved.

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [SOLVE]: [Tutorial Draft] Tooltips

Post by Aikidoka » Mon Feb 25, 2008 2:33 pm

xuanhau wrote:Thanks,
I try custom style and solved.
Great! I'm glad the write up was helpful!

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Internet Explorer cannot open the Internet site

Post by e-motiv » Mon Mar 31, 2008 12:57 pm

I got a major problem with activating the tooltip behavior!!!!! :'(

Code: Select all

JHTML::_('behavior.tooltip');
Problem Description:
Cannot open in Internet Explorer 7!!. She (as in b****) isn't very happy .

Check here for the same error (on the wrong forum).
Strangely xombies states something very similar here for some reason..? But no mentioning why or how to solve this.
I also tried moving that line in my template, but no result.

Log/Error Message:
[quote]Internet Explorer cannot open the Internet site http://ww2.vegetarisme.be/.[/quote]
[quote]This program cannot display the webpage [/quote]
Actions Taken To Resolve:
When removing the following lines, everything works OK. So here lies the problem
[code]<script type=\"text/javascript\">
window.addEvent(\'domready\', function(){ var JTooltips = new Tips($$(\'.hasTip\'), { maxTitleChars: 50, fixed: false}); });
</script>[/code] It's the result of this line in my template (for a Tooltip)[code]JHTML::_('behavior.tooltip');[/code]

Diagnostic Information
Joomla! Version: Joomla! 1.5.2 Production/Stable [ Woi ] 22-March-2008 22:00 GMT
configuration.php: Writable (Mode: 777 ) | RG_EMULATION: N/A
Architecture/Platform: Linux 2.6.22-hardened-r8 ( i686) | Web Server: Apache/2 ( ww2.vegetarisme.be ) | PHP Version: 5.2.5-pl1-gentoo
PHP Requirements: register_globals: Disabled | magic_quotes_gpc: Enabled | safe_mode: Disabled | MySQL Support: Yes | XML Support: Yes | zlib Support: Yes
mbstring Support (1.5): Yes | iconv Support (1.5): Yes | save.session_path: Writable | Max.Execution Time: 30 seconds | File Uploads: Enabled
MySQL Version: ( 5.0.44 )

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by Aikidoka » Mon Mar 31, 2008 2:53 pm

I'll have to bring up a 1.5.2 site to test. Been so busy with other things I still haven't really tried out 1.5 stable! :(

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by e-motiv » Wed Apr 09, 2008 10:32 am

Some further findings already:

It's certain that that line with 'domready' is the problem. Now, if I replaced the original JHTML with:

Code: Select all

<script type="text/javascript">
window.addEvent('load', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); });
</script>
So, first using the literal (not using JHTML) and then replacing the 'domready' with 'load', as was suggested here, it works fine!

So this IS bug, right ?
Something with wanting to change a DOM element before DOM is loaded, even though the 'domready' was used in the event!!??

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by Aikidoka » Mon May 12, 2008 3:33 pm

e-builds wrote: So this IS bug, right ?
Something with wanting to change a DOM element before DOM is loaded, even though the 'domready' was used in the event!!??


Sorry for never getting back. I've been busy changing jobs and I lost my test environment. I have a 1.5.3 site now and am working on a page showing the code snippets in action. I've got it all working as my how to shows. Are you still having issues? I hope to get this page to where you click a button and a pop up shows you the code used. http://www.aikidokatech.com/index.php?option=com_jtests

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by e-motiv » Tue May 13, 2008 10:56 am

Aikidoka wrote:Are you still having issues?
Thanks, but yes and no, not really with my workaround. But I think it's a more general bug (on IE.. and not always, probably combination of something, but persistent). I just posted it for other users.
At least I thínk it's a bug, we'll see further here (domready gives problems in IE (mootools)).

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by Aikidoka » Tue May 13, 2008 1:18 pm

What IE are you using? My test page I posed is working here in both FF3 and IE7. More specifically, IE 7.0.5730.13. Where are you using tooltips and where are you adding your behavior statement? My test page is a manually created component and my behavior statement is in the default view's view.html.php. Do you have a link to the affected page?

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by e-motiv » Tue May 13, 2008 2:17 pm

No link, sorry, since I replaced all of them problematic ones with "load". I can't really force it back for you since there are too many users on it now. Sorry. There are forum topics enough about this, if you really want to investigate the more basic problem). On the bug report, someone said it's a M$ bug.
It's also not that surprising that yours work. Like I said, it's a combination of things, so ..

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

User avatar
OrangeCreative
Joomla! Guru
Joomla! Guru
Posts: 546
Joined: Tue Jan 08, 2008 2:56 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by OrangeCreative » Sat Jun 28, 2008 7:45 am

Excellent tutorial! Many-many thanks for sharing! It saved me a lot of trial and error!

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Fri Nov 21, 2008 7:51 pm

Nice work.
It works fine for me. But still having problems with the css.
You say that tool is de class name. But this class is not in the behavior.
Should it not be JHTML::_('behavior.tooltip','.tool',$opts); ?? When tool is the class
Because default is should be 'hastip'

so in the css it should be
.hastip-text{}
.hastip-title{}

Instead of
.tool-tip{}
.tool-text{}
ect

Kind regard
Jan

Aikidoka
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 103
Joined: Tue Aug 23, 2005 4:10 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by Aikidoka » Fri Nov 21, 2008 8:29 pm

No. That example was for all tooltips by default. Not for a custom named tooltip. That was later in the article.

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Sat Nov 22, 2008 9:44 am

Hi Thanks for your quick response.
But i still donnt get it.
Acoording to the documentation:
JHTML::_('behavior.tooltip','',$opts); So no middel param
this should give the default class named 'hastip'.

Shouldn't i create a '.hastip' class in the css ?

I donnt want a custom class. i want it all default (most easy ;) )
what name should the class be:
i thought
.hastip-text{}
ect

regards Jan

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Sat Nov 22, 2008 10:14 am

I found it.
.tool is the default class. Not .hastip
it works now.

thanks for your patience

Jan

sscooby
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue May 27, 2008 6:17 pm

Re: [Tutorial Draft] Tooltips

Post by sscooby » Thu Feb 05, 2009 10:00 am

WoW thank you very nice tutorial

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3286
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [Tutorial Draft] Tooltips

Post by dextercowley » Tue Feb 10, 2009 6:34 pm

Thanks for the great information. Using this as a base, I created a Wiki tutorial here: http://docs.joomla.org/Tutorial:How_to_ ... a!_website. Here are a couple of useful tips I learned.

1. You can change the CSS classes used both for selecting the tooltip and styling the tooltip by passing parameters to the JHTML::_('behavior.tooltip') function. For example, this code will allow you to use tooltips by specifying the class ".hasTip2" and style these tooltips using the classes "custom2-tip", "custom2-title", and "custom2-text":

Code: Select all

$toolTipArray2 = array('className'=>'custom2');
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray);
2. You can actually do the fade-in and fade-out effects without having to write a complete JS script. Here is the code:

Code: Select all

$toolTipArray = array('className' => 'custom2', 'showDelay'=>'500', 'hideDelay'=>'500', 'fixed'=>'true'
, 'onShow'=>"function(tip) {tip.effect('opacity', {duration: 500, wait: false}).start(0,1)}"
, 'onHide'=>"function(tip) {tip.effect('opacity', {duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray);  // this is used for class="hasTip2" titles
There is more information and sample code in the Wiki tutorial. Happy tooltipping! Mark

P.S. Please feel free to make corrections or additions to the tutorial. Thanks.
Mark Dexter
"Well...how did I get here?"

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Sun Mar 01, 2009 3:23 pm

Hi Mark,
do you how to get rid of that nasty alt="Tooltip".
It always overrides part of the text i realy want to show.

Jan

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3286
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [Tutorial Draft] Tooltips

Post by dextercowley » Sun Mar 01, 2009 3:34 pm

Hi Jan. I don't understand your question. Can you please provide some more details? Thanks. Mark
Mark Dexter
"Well...how did I get here?"

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Sun Mar 01, 2009 3:53 pm

Hi Mark,
go to :
http://www.amaliavansolms.org/joomla15/ ... Itemid=115

Met IE. use youre mouse over the info-sign.
Now you get my tootltip text that is ok. And also the small text "Tooltip" This cause by the Alt="" part in the source.


regards Jan

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3286
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [Tutorial Draft] Tooltips

Post by dextercowley » Sun Mar 01, 2009 5:52 pm

Hi Jan. OK, now I see it. Well, I guess that IE automatically puts anything you have in the alt attribute for an img tag into a tooltip. So I guess if you want to use tooltips on an image for IE, you can not use an alt attribute in the img tag. This is an optional attribute, I believe. Here is a link about this: http://www.w3schools.com/tags/att_img_alt.asp. Mark
Mark Dexter
"Well...how did I get here?"

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Sun Mar 01, 2009 6:14 pm

Well... the alt-tag is placed there by
JHTL::_('Tootltip'
There is nothing i 've done.

Jan

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3286
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [Tutorial Draft] Tooltips

Post by dextercowley » Sun Mar 01, 2009 10:23 pm

Hi Jan. Now I finally understand your issue. You are correct. If you use the JHTML::tooltip function with an image file, it automatically creates the alt attribute, which will mess up the display for IE. I'm going to propose a fix for this. In the meantime, you can either use text tooltips or change line 274 in the file libraries/joomla/html/html.php from:

Code: Select all

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

Code: Select all

$text 	= '<img src="'. $image .'" border="0" />';
Hope this helps, and good luck. Mark
Mark Dexter
"Well...how did I get here?"

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3286
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [Tutorial Draft] Tooltips

Post by dextercowley » Sun Mar 01, 2009 10:33 pm

Hi Jan. I should of course add that you can just enter in the HTML directly and not use the JHTML::tooltip function at all. But I still agree with you that this should give you the option to suppress the alt tag for image tooltips. Thanks. Mark
Mark Dexter
"Well...how did I get here?"

polleke
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Aug 31, 2006 6:32 pm

Re: [Tutorial Draft] Tooltips

Post by polleke » Mon Mar 02, 2009 8:32 am

I saw JTEXT::_('Tooltip') ?
So i can also add the translate string 'Tooltip' to any of my language files. e.g.:
nl_NL.ini
Tooltip=
(leaving it empty)

Thanks very much for youre (Tool)tips ;-)
Jan

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Re: [Tutorial Draft] Tooltips

Post by e-motiv » Mon Apr 27, 2009 4:47 pm

e-builds wrote:Some further findings already:

It's certain that that line with 'domready' is the problem. Now, if I replaced the original JHTML with:

Code: Select all

<script type="text/javascript">
window.addEvent('load', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); });
</script>
So, first using the literal (not using JHTML) and then replacing the 'domready' with 'load', as was suggested here, it works fine!

So this IS bug, right ?
Something with wanting to change a DOM element before DOM is loaded, even though the 'domready' was used in the event!!??
For people that still have this bug ór my workaround, it seems the IE7 bug is not happening in the new mootools library version!
Check here ([IE7 fatal error] Jtooltips - window.addEvent('domready', f) for a custom solution. I must say I don't know which mootools version is in the current Joomla version (I am a bit behind).

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

Biomehaniker
Joomla! Intern
Joomla! Intern
Posts: 74
Joined: Tue Jul 11, 2006 8:17 pm

Re: [Tutorial Draft] Tooltips

Post by Biomehaniker » Sat Feb 06, 2010 9:21 pm

I spend a hour finding my problem... finally I got it...

Problem:
If you use a selfcreated templates with lot of diffs AND use the "z-index" function from css it might happen that the tooltip isn´t showing up on your page.

Why is this happening?:
That because your DIVs are OVER the tooltip. Means if your DIV is z-index:10 then it is 10 layers on top of the tooltip

How can I get it solved:
add "z-index:99;" to the .tool-tip class and play around with the number (99) until your tip appears on the page.


Locked

Return to “Joomla! 1.5 Coding”