Опубликовано автор в категориях Joomla.

tooltipЗдравствуйте! Наконец-то в суете послепраздничных дел, мне удалось взяться за написание ответа на вопрос читателя Buzun. Для начала я процитирую сам вопрос:

…есть ли возможность средствами HTML и CSS реализовать tooltips ( всплывающие подсказки ) в Joomla 1.5, но сделать это так что бы tooltips показывались над любой ссылкой (не только в контенте но и модулях и компонентах). В случае если тег титл не указан выводился бы текст ссылки ($text).
Eсли же нет то не могли бы вы разъяснить как подключить сей вариант бесплатного скрипта Mootools, здесь примеры, что я имею ввиду http://demos111.mootools.net/Tips но опять же что бы он действовал на все ссылки joomla.
Еединственный вариант решения, что мне попался на форумах joomla 1.5 вот http://forum.joomla.org/viewtopic.php?f=231&t=185473&p=1254549 (ссылка битая — Hiway), но если честно завис на вопросе внесения изменений в библиотеке \libraries\joomla\html\html.php.
Подытоживая:
1. есть ли возможность сделать tooltips для всех ссылок на странице?
2. возможно ли их реализовать более красивым и полупрозрачными?
P.S. ну и если нет то как прикрутить этот Mootools именно tooltips.

Итак, для начала немного конкретизируем и сократим «предмет исследования». Насколько я понял из вопроса — вас интересует именно фронтенд — то есть то что видит пользователь на вашей странице. Ок, считаем, что определились. Итак, сначала отвечу по поводу вот этой части вопроса «есть ли возможность средствами HTML и CSS реализовать tooltips ( всплывающие подсказки ) в Joomla 1.5» — да есть, и не только в Joomla 1.5, а везде, но не совсем полноценно и не для всех браузеров, если говорить только про HTML и CSS.

Способ очень простой. Но он в тоже время и несколько ресурсоемкий, для веб-мастера. Суть его заключается в том, что настоящий title у ссылки отсутствует, а в месте где необходимо сделать красивый тултип, мы используем конструкцию типа:

<a href=»http://www.w3.org/Style/CSS/» class=»info»>css<span>cascade style sheets, the
separation from content and presentation</span></a>

Где, собственно, подсказка и заключена в span. Здесь мы используем чистый html, а к нему CSS — типа такого:

a.info{
position:relative; /*this is  the key*/
z-index:24;  background-color:#ccc;
color:#000;
text-decoration:none}
 
a.info:hover{z-index:25;  background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover  span{ /*the span will display just on :hover  state*/
display:block;
position:absolute;
top:2em;  left:2em; width:15em;
border:1px solid  #0cf;
background-color:#cff;  color:#000;
text-align: center}

Решений, на подобии этого море. Плюс здесь в том, что это чистый CSS, а минус в том, что применение возможно только в местах, где специально создана нужная конструкция. В итоге, мы не можем использовать чистый метод для создания стиля для title на все странице.

Теперь идем дальше. Поскольку мы не можем использовать чистый CSS, то нам поможет великий и могучий JS. Даже если вы не знаете хорошо JavaScript, вампомогут библиотеки типа Mootools, jQery и т.д.. Мы остановимся на Mootools, поскольку он по умолчанию внедрен в  Joomla! 1.5. Для того чтобы вызвать библиотеку в вашем шаблоне вам нужно воспользоваться методом <?php JHTML::_(‘behavior.mootools’); ?>, далее, чтобы использовать в вашем шаблоне повсеместно стандартные toltips  Joomla!, вамнужно также вызвать этот метод в шаблоне <?php JHTML::_(‘behavior.tooltip’); ?>, тогда вы получите возможность использовать использовать подсказки к ссылкам через стандартный метод Joomla!, присваивая нужной ссылке class=»hasTip». При этом, оформить свои ссылки вы можете как угодно с помшью следующих css-классов:

  • .tool-tip
  • .tool-title
  • .tool-text

Подробно это описано здесь. Но это только часть решения, поскольку мы будем иметь красивый toltips только у ссылок с нужным классом. Теперь, как же нам сделать так, чтобы все ссылки имели красивый tootip, как показано в примере   http://demos111.mootools.net/Tips. На самом деле, все гараздо проще, нежели можно представить. Если посмотреть на js-код в примере на сайте Mootools, то в любом из предложенных способов мы видем, что используется функция «$$«, напимер:

var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

То есть, мы обращаемся  непосредственно к элементу с cllass=»Tips2″ нашего древа DOM. Но, если мы посмотрим документацию Mootools, то мы увидим, что функция «$$» в Mootools позволяет нам также обращатся к любому элементу по селектору. То есть, все что нам нужно сделать для того, чтобы красивые подсказки были у всех ссылок на странице, так это заменить в приведенном примере селектор класса на атрибут тега ссылки:

var Tips2 = new Tips($$('a'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

Теперь вы применяете эффект красивый подсказок ко всем ссылкам на странице. Причем в данном примере, по просьбе автора вопроса я выбрал эффект при котором в случае отсутствия у ссылки атрибута title будет выводится в подсказке непосредственное содержание ссылки. Да, классы оформления будут такимиже как и для стандартных tooltips:

  • .tool-tip
  • .tool-title
  • .tool-text

Причем сделать их полупрозрачными или еще как — это уже только CSS. А конструкция самого заголовка ссылки может иметь вид title=»Заголовок подсказки :: Текст подсказки».

Остается только добавить, что если вы хотите абстрагироваться от стандартного метода подсказок  Joomla! 1.5, то вам не нужно в шаблоне вызывать метод   <?php JHTML::_(‘behavior.tooltip’); ?>. Досаточно просто вызвать <?php JHTML::_(‘behavior.mootools’); ?>, а для инициирования эффекта подсказок Mootools в шаблоне между <head> и </head> прописать скрипт:

window.addEvent('domready', function() {
var Tips2 = new Tips($$('a'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
 
});
});

Вроде  все. Остается только добавить, что использовать это можно и не в Joomla! 1.5, а везде, где вы «прикрутите» Mootools.   Удачи вам с Joomla! 🙂

Важное дополнение и ответ на комментарии от BUZUN

Что бы скрипт работал по умолчанию для все ссылок на странице при создании класса обязательно использовать не просто var Tips а именно var Tips2. Тогда нет конфликта с используемой переменной библиотекой Joomla! по умолчанию.

Да  еще, обещанный постовой:

Новый год наступил, а блогосфера продолжает Новогодния PR.

30 комментариев к записи “Всплывающие подсказки в Joomla! 1.5 — ответ на вопрос читателя”

  1. BUZUN

    Спасибо за подробный рассказ но есть одно «Но» заключаться в том что вставив js и настроив css для tooltip на чистой joomla — ничего не происходит сначала я думал что сам ступил где то. Но зайдя на фронтенд сайта (не из админки) под паролем случайно навел на значок редактирования и увидел результат правда применялся он только к этому значку а не ко всем ссылкам ну соответственно без входа с паролем не работает

    Ответить
  2. Hiway

    Смотри. Я тестировал єто решение в рамках простого html, но суть его проста и должна работать в любом виде сгенерированного кода. Потому как берутся все ссылки на странице и обрабатываются. Посмотри в отладчике, например Firebug, нет ли конфликта скриптов. Я как разгребусь с делами обязательно потестирую и отпишусь.

    Ответить
  3. BUZUN

    На мой взгляд тут дело не в багах а дело в правах самого tooltip в joomla который может применяться либо для зареганых пользователей (только к модулям касающимся самой админки /редакторам и т.д./ или в сторонних расширениях или компонентах)

    Ответить
  4. BUZUN

    Ведь недаром во всех шаблонах Yoo и рокет и т.д. mootools подключают еще из дополнительной библиотеки шаблона ребята наверно ушлые и как говорить плавали .. )))

    Ответить
  5. Hiway

    Смотри, если ты используешь этот скрипт внутри шаблона между

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    window.addEvent('domready', function() {
    var Tips = new Tips($$('a'), {
    initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
    },
    onShow: function(toolTip) {
    this.fx.start(1);
    },
    onHide: function(toolTip) {
    this.fx.start(0);
    }
     
    });
    });

    то ты автоматические создаешь создаешь свой класс Tips который вызывает функцию из плагина tooltip и mootools, тебе выходит плевать на то, что есть в самой библиотеке joomla. Главное, чтобы в шаблоне вызывался motools.

    Ответить
  6. BUZUN

    Итак, докладываю результаты, исполнив в точности выше перечисленное – результат – 50%
    Т.е. – функция tooltip применяеться только для элементов относящихся к админке – кнопка «редактировать» и т.д. и т.п. и на этом все.
    Теперь «эксперименты» методом научного тыка (ввиду отсутствия присутствия =) навыка в js остался только такой метод):
    Вызов дополнительно JHTML::_('behavior.tooltip'); не дает ни чего но оформив вызов слегка по другому JHTML::_('behavior.tooltip','',''); дает результат всплывающие подсказки применяются ко всем тегам НО
    Выглядит это интересно а именно почему то выводиться 2 строки
    1ая – URL (сцылка)) Пример http://192.168.1.20/index.php?option=com_content&view=article&id=19&Itemid=27
    классом - css соответствует .tool-title
    А под ней
    2ая – уже собственно выводиться сам текст титла другим классом - css соответствует .tool-tip
    Соответственно там где нет текста титла выводиться только выше указанная 1ай строка с URL сцылки
    Причем :
    В IE 6 на все теги где нет текста титла но кроме любых тегов в контенте
    В IE 7 на все теги где нет текста титла но кроме любых тегов в контенте
    В FF 3.0.5 tooltip – дейстует на все теги по всему фронтэнду
    И как же это привести в порядок %)

    Ответить
  7. BUZUN

    Сорри за невнимательность теги — удалились при добавлении а под понятием теги имелись именно они ))))

    Ответить
  8. Hiway

    Так много текста. Смотри. Когда ты вызываешь JHTML::_(‘behavior.tooltip’,»,»); в шаблоне добавляя ,»,» — то ты говоришь как раз функции чтобы она использовала при выводе имено конструкцию из двух параметров, при этом под это конструкцие подразумевается title=»ТИТЛ::ТЕКСТ» тогда в подсказке будет и заголовок и текст. Но это ты все используешь стандартные методы Joomla, которые базируются на Mootools.
    Но ты можешь и не вызывать этот метод, но обязательно вызывать в шаблоне mootools и при этом добавить плагина Tooltip ко все линкам на странице посредством его инициации через скрипт

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    window.addEvent('domready', function() {
    var Tips = new Tips($$('a'), {
    initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
    },
    onShow: function(toolTip) {
    this.fx.start(1);
    },
    onHide: function(toolTip) {
    this.fx.start(0);
    }
     
    });
    });
    Ответить
  9. Hiway

    Внесу небольшую правка, в предложенном скрипте важно использовать в качестве имени для переменной не var Tips а var Tips2. Почему? объяснил в конце статьи. В таком случае все работает. Проверял лично на Joomla! 1.5.9

    Ответить
  10. BUZUN

    Спасибо! если «использовать не просто var Tips а именно var Tips2» то все работает хорошо во всех браузерах =)
    хм … Прошу прощение за надоедливость
    Правда ума не приложу что же делать ссылками в первой строке и откуда они берутся ? где вставлять условие что если тега титл нет то титлом назначить текст сцылки ? или просто для этого можно использовать какой нибудь плагин?

    Ответить
  11. BUZUN

    Нашел в media\system\js\mootools-uncompressed.js вот такой кусок кода похоже что формирование текста титла идет в самом скрипте моотолс может поможет

    build: function(el){
    el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
    if (el.title){
    var dual = el.title.split('::');
    if (dual.length > 1){
    el.$tmp.myTitle = dual[0].trim();
    el.$tmp.myText = dual[1].trim();
    } else {
    el.$tmp.myText = el.title;
    }
    el.removeAttribute('title');
    } else {
    el.$tmp.myText = false;
    }
    if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "…";
    el.addEvent('mouseenter', function(event){
    this.start(el);
    if (!this.options.fixed) this.locate(event);
    else this.position(el);
    }.bind(this));
    if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
    var end = this.end.bind(this);
    el.addEvent('mouseleave', end);
    el.addEvent('trash', end);
    },

    start: function(el){
    this.wrapper.empty();
    if (el.$tmp.myTitle){
    this.title = new Element('span').inject(new Element('div', {'class': this.options.className + '-title'}).inject(this.wrapper)).setHTML(el.$tmp.myTitle);
    }
    if (el.$tmp.myText){
    this.text = new Element('span').inject(new Element('div', {'class': this.options.className + '-text'}).inject(this.wrapper)).setHTML(el.$tmp.myText);
    }
    $clear(this.timer);
    this.timer = this.show.delay(this.options.showDelay, this);
    },

    Ответить
  12. Hiway

    Ты залез в дебри, очень глубоко залез. Давай еще раз по пунктам. Что ты хочешь сделать, а то я начинаю путаться.

    Ответить
  13. BUZUN

    я тоже так подумал )))
    итак
    1 сделать так что бы всплывающие подсказки действовали на всем фронтенде — вопрос решен всплывают ))) спасибо.

    теперь нада привести их в удобоваримый вид а то теряется смысл всех прошлых мучений =>

    2 всплывающая подсказка появляться в виде 2 строк
    1я строка — тест сцылки (_http://..хост…/index.php?option=c…) вот в таком обрубленом виде
    2я строка — уже собственно и нужный нам текст титла
    нада разобраться что из них оставить и как убрать ненужную

    3 еть ссылки (допустим майнменю или название сайта на фронтенде) они без титла идут как сделать так чтобы если титла нет то титл был = тексту сцылки т.е. допустим «Главная» всплывало бы «Главная» а не пустое место

    Ответить
  14. Hiway

    Значит по второму вопросу почитай вот это http://docs111.mootools.net/Plugins/Tips.js#Tips плюс, можно вообще без mootools обойтись вот здесь пример автономного метода http://web-graphics.com/mtarchive/BubbleTooltips.html
    По третьему вопросу — что касается меню, то нужно в сделать свой шаблон для mod_mainmenu где добавить еще один параметр для ссылки для титла. Но это тема отдельного поста. А что касается в названии сайта то все зависит от того как ты его выводишь в шаблоне.

    Ответить
  15. Дмитрий

    Здравствуйте, подскажите пожалуйста, как разбить одну картинку на области, и для каждой области вывести всплывающую подсказку? (на фотографии отметить людей)

    Ответить
  16. hiway

    Есть два варианта:
    1. Сделать картинку в виде карты и для каждого элемента поставить tittle=»» и вывести его содержимое через тултип по схеме в статье.
    2. Сделать все это без скриптов с помощью CSS. Тогда картинка помещается в блок с относительным позиционированием, в ней вкладываются спаны с абсолютным позиционированием и для них делается стиль, который на хувер показывает область выделения. Если добавить опять же скрипт который в статье то можно тайтлы вывести красиво. Это если кратко.

    Ответить
  17. Дмитрий

    по первому пункту — joomla не воспринимает тег (. Или вы имели ввиду другое?

    Ответить
  18. Katie

    Здравствуйте. В joomla 1.5 нужно на трех картинках изменить стиль title, вставила hasTip и код в начале — работает. Но на мое форматирование классов tool-tip, tool-text, tool-title из файла шаблона general.css никак не реагирует. Т.е. использует прозрачный фон и черный текст по умолчанию. Куда нужно вставлять классы чтобы вывести в нужном виде посказки?

    Ответить
  19. Lynx_Lynx

    У меня Joomla 1.5.15
    между тегами вставляем следующее:

    var load_method = (window.ie ? ‘load’ : ‘load’);
    window.addEvent(load_method, function(){
    var MTTips = new Tips($$(‘.MTTips’), {
    initialize:function(){
    this.fx = new Fx.Style(this.toolTip, ‘opacity’, {duration: 500, wait: false}).set(0);
    },
    className: ‘custom’,
    onShow: function(toolTip) {
    this.fx.start(1);
    },
    onHide: function(toolTip) {
    this.fx.start(0);
    }
    });
    });

    и все !!!
    используем 😉

    Ответить
  20. Lynx_Lynx

    У меня Joomla 1.5.15
    между тегами вставляем следующее:

    var load_method = (window.ie ? 'load' : 'load');
    window.addEvent(load_method, function(){
    var MTTips = new Tips($$('.MTTips'), {
    initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
    },
    className: 'custom',
    onShow: function(toolTip) {
    this.fx.start(1);
    },
    onHide: function(toolTip) {
    this.fx.start(0);
    }
    });
    });

    и все !!!
    используем 😉

    Ответить
  21. Сергей

    Здравствуйте, пасибо за статью, всё работает)
    подскажите, пожалуйста, можно ли реализовать как-нибудь, чтобы при наведении всплывало содержание материала по ссылке, то бшиь превью статьи такое?

    Ответить
  22. Евгений

    Как отменить всплывающие подсказки у всех пунктов меню (joomla 1.5.18). Подсказки просто повторяют название меню.
    Спасибо.

    Ответить
    • Евгений

      Все, нашел.
      В файле jv.common.php строка у меня 60:
      /* $title = «title=\»$row->name\»»; */
      ее я закомментировал. Подсказки больше не всплывают.

      Ответить
  23. flikoman

    В итоге всплывающая подсказка появляется относительно указателя мыши.
    А можно ли сделать чтобы подсказка появлялась в определенном месте?

    Ответить
  24. Юрий

    У меня J!1.22 прописал ваш скрипт и выдает ошибку на тег var
    Parse error: syntax error, unexpected T_VAR in Y:\home\(my_site)\www\templates\(my_template)\index.php on line 23
    Как тут исправить?
    И еще, есть скрипт tooltips.js в папке js, прописан в шаблоне, но не выводится, firebug юзаю, ошибок нет. Как его активировать?

    Ответить
  25. Юрий

    Сам додумался, что это js, а я лепил php. Работает. Посмотрим поддается ли редактированию css

    Ответить
  26. Юрий

    Вот ещёб загнать окошко под руку, не выходит пока. А можно вместо ссылок алины лепить в картинках и заголовках?
    А по повлду скрипта tooltips.js так он и не запустился, но юзаю Ваш, спасибо помогли

    Ответить

Оставить комментарий

  • (не будет показан)