Разработка в Joomla

В 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   = '<img src="'. $image .'" border="0" alt="'. JText::_( 'Tooltip' ) .'"/>';
        } else {
                $text   = JText::_( $text, true );
        }
 
        if($title) {
                $title = $title.'::';
        }
 
        $style = 'style="text-decoration: none; color: #333;"';
 
        if ( $href ) {
                $href = JRoute::_( $href );
                $style = '';
                $tip = '<span class="editlinktip hasTip" title="'.$title.$tooltip.'" '. $style .'><a href="'. $href .'">'. $text .'</a></span>';
        } else {
                $tip = '<span class="editlinktip hasTip" title="'.$title.$tooltip.'" '. $style .'>'. $text .'</span>';
        }
 
        return $tip;
}

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

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

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

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

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

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

/includes/js/ThemeOffice/

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

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

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

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

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

window.addEvent('domready', function(){

    var zoomTip = new Tips($$('.hasTip3'), {
    className: 'custom3', //префикс для CSS класса
        fixed: true,
        offsets: {
                        'x': 20,       //по умолчанию 16
                        'y': 30        //по умолчанию 16
              },
              initialize:function(){
                 this.fx = new Fx.Style(this.toolTip, 'opacity', 
                                 {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