basics

CSS

HTML

template

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. The tooltips can add functionality and fun to your site, but just inserting them without styling them accordingly can have an unusable or "just" boring result. And you want to avoid both, I guess...

Adding CSS Styling to the Tooltip

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

Here are the default styles.

/* 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;
}

The default tooltips, whether using the JHTML::tooltip method or class method, use the following three CSS classes: .tip, .tip-title, and .tip-text plus a wrapper class .tip-wrap.

Here are the default styles.

/* Tooltips */
.tip-wrap{
    z-index: 10000;
}
.tip {
   float: left;
   background: #ffc;
   border: 1px solid #D4D5AA;
   padding: 5px;
   max-width: 200px;
}
 
.tip-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;
}
 
.tip-text {
   font-size: 100%;
   margin: 0;
}

If you have a custom CSS file, copy this code and alter it to your liking. Note that the .tool-title (.tip-title Joomla v1.6+) 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

Ok, now it's time to have some fun. The JHTML::_('behavior.tooltip') 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 "::")
• showDelay, hideDelay: The time to delay showing or hiding the tooltip, in milliseconds. Default is 100.
• className: The first part of the class name used to style the actual tooltip. The default, as we saw, is "tool", and the full class names by default are "tool-tip", "tool-title', and "tool-text". So, for example, if we set this to "custom", we would style the classes "custom-tip", "custom-title", and "custom-text".
• fixed: Whether or not to have the tooltip move with the mouse. If set to "true", the tooltip will be centered below the text or image. If set to "false", the tooltip will move with the mouse. Default is "false".
• onShow, onHide: Functions to call for the onShow and onHide events. We'll see an example below where we can use these to create a fade-in and fade-out for the tooltip.