В Joomla есть функция для добавления всплывающей подсказки. Выглядит она так:

function tooltip($tooltip, $title='', $image='tooltip.png', $text='', $href='', $link=1)
{
        $tooltip        = addslashes(htmlspecialchars($tooltip, ENT_QUOTES, 'UTF-8'));
        $title          = addslashes(htmlspecialchars($title, ENT_QUOTES, 'UTF-8'));
 
        if ( !$text ) {
                $image  = JURI::root(true).'/includes/js/ThemeOffice/'. $image;
                $text   = &#39;<img src="&#39;. $image .&#39;" border="0" alt="&#39;. JText::_( &#39;Tooltip&#39; ) .&#39;"/>&#39;;
        } else {
                $text   = JText::_( $text, true );
        }
 
        if($title) {
                $title = $title.&#39;::&#39;;
        }
 
        $style = &#39;style="text-decoration: none; color: #333;"&#39;;
 
        if ( $href ) {
                $href = JRoute::_( $href );
                $style = &#39;&#39;;
                $tip = &#39;<span class="editlinktip hasTip" title="&#39;.$title.$tooltip.&#39;" &#39;. $style .&#39;><a href="&#39;. $href .&#39;">&#39;. $text .&#39;</a></span>&#39;;
        } else {
                $tip = &#39;<span class="editlinktip hasTip" title="&#39;.$title.$tooltip.&#39;" &#39;. $style .&#39;>&#39;. $text .&#39;</span>&#39;;
        }
 
        return $tip;
}

Вызывается с помощью такого кода:

JHTML::tooltip(&#39;This is the tooltip text&#39;, &#39;Tooltip title&#39;, &#39;tooltip.png&#39;, &#39;&#39;, 
               &#39;http://www.joomla.org&#39;);

В head область страницы это добавляет следующий js:

window.addEvent(&#39;domready&#39;, function(){ var JTooltips = new Tips($$(&#39;.hasTip&#39;), { maxTitleChars: 50, fixed: false}); });

Почитать подробнее об этом

Неудобство, на мой взгляд, в том что, чтобы выбрать изображение можно только из папки:

/includes/js/ThemeOffice/

Как добавить Tooltips для нужного изображения или другого объекта..

Нужно для изображения задать класс .hasTip и текст для title

Не забыть еще добавить код:

JHTML::_(&#39;behavior.tooltip&#39;);

Либо можно, например, в файл шаблона добавить такой код:

window.addEvent(&#39;domready&#39;, function(){
 
    var zoomTip = new Tips($$(&#39;.hasTip3&#39;), {
    className: &#39;custom3&#39;, //префикс для CSS класса
        fixed: true,
        offsets: {
                        &#39;x&#39;: 20,       //по умолчанию 16
                        &#39;y&#39;: 30        //по умолчанию 16
              },
              initialize:function(){
                 this.fx = new Fx.Style(this.toolTip, &#39;opacity&#39;, 
                                 {duration: 1000, wait: false}).set(0);
              },
              onShow: function(toolTip) {
                 this.fx.start(0,.8);
              },
              onHide: function(toolTip) {
                 this.fx.start(.8,0);
              }
           });
        });

fixed:true - подсказка появляется в определенном offset положении, также, для появления onShow и исчезновения onHide применяется эффект затухания

css для tooltip в этом случае будет:

.custom3-tip {
        color: #000;
        width: 130px;
        z-index: 13000;
}
 
.custom3-title {
        font-weight: bold;
        font-size: 11px;
        margin: 0;
        color: #3E4F14;
        padding: 8px 8px 4px;
        background: #C3DF7D;
        border-bottom: 1px solid #B5CF74;
}
 
.custom3-text {
        font-size: 11px;
        padding: 4px 8px 8px;
        background: #CFDFA7;
}

Описание Tips на сайте mootools.net

Чтобы сделать комментарий, нужно авторизоваться на сайте!