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

HTML код tooltip:

<div class="tip-top"></div> //useful for styling
 
    <div class="tip">
 
        <div class="tip-title"></div>
 
        <div class="tip-text"></div>
 
    </div>
 
<div class="tip-bottom"></div> //useful for styling

CSS код:

.tip        { width:295px; font-family:tahoma,arial; background:#fff; border-radius:10px; border:1px solid #eee; }
.tip-top      { background:transparent; height:10px; width:295px; }
.tip-title    { color:#e95e25; font-weight:bold; margin:10px 20px 0 40px; }
.tip-text    { color:#000; padding:10px 20px 20px 40px; }
.tip-bottom    { background:transparent; width:295px; height:81px; }

Для активизации эффекта в Joomla по умолчанию используется класс .hasTip:

<a href="#" class="hasTip" title="Заголовок для подсказки?::Текст подсказки">Ссылка с подсказкой</a>

Заголовок подскази и текст подсказки разделяется двумя двоеточиями ::

См. также: 

http://mootools.net/docs/more/Interface/Tips

http://davidwalsh.name/mootools-12-tooltips-customize