Рубрики
Joomla

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

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 — ответ на вопрос читателя”

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

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

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

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

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

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.

Итак, докладываю результаты, исполнив в точности выше перечисленное – результат – 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 – дейстует на все теги по всему фронтэнду
И как же это привести в порядок %)

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

Так много текста. Смотри. Когда ты вызываешь 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);
}
 
});
});

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

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

Нашел в 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);
},

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

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

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

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

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

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

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

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

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

У меня 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);
}
});
});

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

У меня 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);
}
});
});

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

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

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

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

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

У меня 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 юзаю, ошибок нет. Как его активировать?

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

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

Добавить комментарий для Диана Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *