Всплывающие подсказки в Joomla! 1.5 — ответ на вопрос читателя
Здравствуйте! Наконец-то в суете послепраздничных дел, мне удалось взяться за написание ответа на вопрос читателя 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.
Loading ...
Полезная вещь, спасибо за реализацию.
Спасибо за подробный рассказ но есть одно «Но» заключаться в том что вставив js и настроив css для tooltip на чистой joomla — ничего не происходит сначала я думал что сам ступил где то. Но зайдя на фронтенд сайта (не из админки) под паролем случайно навел на значок редактирования и увидел результат правда применялся он только к этому значку а не ко всем ссылкам ну соответственно без входа с паролем не работает
Смотри. Я тестировал єто решение в рамках простого html, но суть его проста и должна работать в любом виде сгенерированного кода. Потому как берутся все ссылки на странице и обрабатываются. Посмотри в отладчике, например Firebug, нет ли конфликта скриптов. Я как разгребусь с делами обязательно потестирую и отпишусь.
На мой взгляд тут дело не в багах а дело в правах самого tooltip в joomla который может применяться либо для зареганых пользователей (только к модулям касающимся самой админки /редакторам и т.д./ или в сторонних расширениях или компонентах)
Ведь недаром во всех шаблонах Yoo и рокет и т.д. mootools подключают еще из дополнительной библиотеки шаблона ребята наверно ушлые и как говорить плавали ... )))
Смотри, если ты используешь этот скрипт внутри шаблона между
то ты автоматические создаешь создаешь свой класс Tips который вызывает функцию из плагина tooltip и mootools, тебе выходит плевать на то, что есть в самой библиотеке joomla. Главное, чтобы в шаблоне вызывался motools.
Спасибо попробую)
Итак, докладываю результаты, исполнив в точности выше перечисленное – результат – 50%
Т.е. – функция tooltip применяеться только для элементов относящихся к админке – кнопка «редактировать» и т.д. и т.п. и на этом все.
Теперь «эксперименты» методом научного тыка (ввиду отсутствия присутствия =) навыка в js остался только такой метод):
Вызов дополнительно
JHTML::_ ('behavior.tooltip');не дает ни чего но оформив вызов слегка по другомуJHTML::_ ('behavior.tooltip','','');дает результат всплывающие подсказки применяются ко всем тегам НОВыглядит это интересно а именно почему то выводиться 2 строки
1ая – URL (сцылка)) Пример
классом — 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 ко все линкам на странице посредством его инициации через скрипт
Внесу небольшую правка, в предложенном скрипте важно использовать в качестве имени для переменной не 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 еть ссылки (допустим майнменю или название сайта на фронтенде) они без титла идут как сделать так чтобы если титла нет то титл был = тексту сцылки т.е. допустим «Главная» всплывало бы «Главная» а не пустое место
Значит по второму вопросу почитай вот это плюс, можно вообще без mootools обойтись вот здесь пример автономного метода
По третьему вопросу — что касается меню, то нужно в сделать свой шаблон для mod_mainmenu где добавить еще один параметр для ссылки для титла. Но это тема отдельного поста. А что касается в названии сайта то все зависит от того как ты его выводишь в шаблоне.
Здравствуйте, подскажите пожалуйста, как разбить одну картинку на области, и для каждой области вывести всплывающую подсказку? (на фотографии отметить людей)
Есть два варианта:
1. Сделать картинку в виде карты и для каждого элемента поставить tittle="" и вывести его содержимое через тултип по схеме в статье.
2. Сделать все это без скриптов с помощью CSS. Тогда картинка помещается в блок с относительным позиционированием, в ней вкладываются спаны с абсолютным позиционированием и для них делается стиль, который на хувер показывает область выделения. Если добавить опять же скрипт который в статье то можно тайтлы вывести красиво. Это если кратко.
по первому пункту — joomla не воспринимает тег (. Или вы имели ввиду другое?
тег map
Здравствуйте. В 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); } }); });и все !!!
используем