The YUI.ALIRO.COREUI JavaScript class provides functionality for creating system tooltips. Tooltips can be created using PHP or JavaScript.
A common use case for tooltips is the creation of the them in reference to an inline mouseover event. Since there are some scope complexities involved with such an action there is another convenience method you should rely on for performing this task called "displayAdvTooltip". Here is an example:
In older versions of Mambo, MiaCMS, Joomla overLib∞ was used to create tooltips. You can still utilize overLib with Aliro if you'd like, but you'll need to include and manage it as a separate library within your extension. It is not bundled in the core any longer and the core functions related to it have been removed. To cut down on 3rd party dependencies and maintain a consist/enterprise grade system all core UI elements are built on top of the Yahoo! User Interface Library (YUI). You are not required to utilize YUI in your custom extensions, but we do recommend it.

(html)

(php)
%%(css)

Advanced Tooltips with JavaScript

Styling Tooltips

Tooltips rely on the YUI overlay widget∞ under the hood. A single div with the id of "aliro_tooltip_container" is used as a container for all tooltips. To target a tooltips for styling you'll need to use CSS selectors with a combination of aliro_tooltip_container and various YUI related classes. The default admin and at_galley templates both contain some basic tooltip selectors for reference. Here are the basics used to generate the screenshots displayed above:
#aliro_tooltip_container .yui-overlay-content {
}
#aliro_tooltip_container .yui-overlay-content .yui-widget-hd {
}
#aliro_tooltip_container .yui-overlay-content .yui-widget-bd {
}
#aliro_tooltip_container .yui-overlay-content .yui-widget-ft {
}

Tooltip from Markup with PHP

To create a basic tooltip using PHP you can make use of the aliroHTML::toolTip() method. Here is a simple example
Here is a screenshot of that tooltip in action:

If you need more control over the tooltip you might try setting one up with JavaScript. You can call the same JavaScript method used under the hood by aliroHTML::toolTip(), but with the added benefits of being more specific and not being tied to a specific DOM structure. The YUI.ALIRO.COREUI∞ class provides a tooltip object and a set of basic methods for constructing, displaying, and hiding custom tooltips. The most important method to focus on is "displayTooltip". This method accepts an DOM node reference or element id to use for alignment, tooltip text to use for the body, header, footer, positioning information, and a width.
Here is an example:
YUI.ALIRO.COREUI.tooltip.displayAdvTooltip.call('some-element-id', 'Tooltip body here', 'Tooltip header here', 'Tooltip footer here', 'TL', 'TR', '20em');
Note: In that example TL and TR and related to the overlayPosition and the nodePosition. For all possible positions use this reference∞.
A common use case for tooltips is the creation of the them in reference to an inline mouseover event. Since there are some scope complexities involved with such and action their is another convience method you should rely on for performing this task called "displayAdvTooltip". Here is an example:
<a href="javascript: void(0);" <?php echo $hover; ?> >foooo</a>
The two previous example would generate a more advanced tooltip as displayed in the following screenshot:

Note: You are note limited to using raw text for the tooltip header, body, or footer. HTML is accepted.

$aliroHTML = aliroHTML::getInstance();
aliroRequest::getInstance()->requestTooltip(); //bring in the required JavaScript and CSS resources
		
$tip = T_('Override your Template CSS file');
echo $aliroHTML->toolTip($tip);