Joomla!

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

Written by Ian Carnaghan · 47 sec read >

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

JHTML::_('behavior.tooltip');

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}); });
 </script>

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

Last Updated On March 30, 2018
Written by Ian Carnaghan
I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment. In my spare time I teach undergraduate classes in web development. Profile

Leave a Reply

avatar
  Subscribe  
Notify of