How to add a CSS styled tooltip to your Joomla! 1.5 website

No Comments

In your code add the following code to activate the tooltip behavior


This only needs to be added once per file. A good place to put it is just underneath the defined(‘_JEXEC’) or die(‘Restricted access’); at the top of the page.

The tooltip behavior will put the following code automatically in the head section of your HTML page

<script type="text/javascript">
        window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); });

Now where ever you want the tooltip to appear, place the following code in your page.

<span class="hasTip" title="Tooltip Title::Tooltip Description">Hover over here to view your tooltip</span>

Notice that in the title tag above is your Title and Description separated by the ::characters and anything between the span tags may be changed

The following styles are the default tooltip 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;

Override the above styles in your templates stylesheet in order to change the styling of the tooltip.

To read more about the Joomla! tooltip behavior click here

Image Credits: Photo by Isis França on Unsplash.

Related Articles

No results found.

Leave a Reply

Notify of