Создание всплывающих подсказок (tooltips) в Joomla!
Хотелось бы уделить немного внимания таким полезным вещам как всплывающие подсказки и тому, как можно создать их на сайте с Joomla. Кратко о том, что же такое всплывающие подсказки. Всплывающая подсказка - это текст, который появляется при наведении курсора мыши на определенный элемент страницы, будь то картинка, слово, блок, кнопка и так далее. Всплывающие подсказки служат, например, для подачи дополнительной информации пользователям или для пояснения, не занимая при этом видимую, основную часть страницы. Например, у вас в на странице встретится слово, которое может быть не знакомо посетителям вашего сайта, и вы хотите дать им краткую информацию о нем. Например: Черная дыра. При наведении указателя мышки на фразу Черная дыра, вы увидите подсказку, описывающую, что это такое. Такой тип подачи дополнительной информации очень популярен в современном веб дизайне. Для создания простейшей подсказки можно воспользоваться стандартными средствами HTML - задать у тега дополнительный атрибут title, например:
<a href="#" title="Это обыкновенная подсказка">Ссылка в никуда</a>При наведении курсора на Ссылка в никуда - вы увидите подсказку, описанную в атрибуте title. Также метод создания подсказок применим практически к любым элементам страницы. Внешний вид таких подсказок, как вы могли заметить, устанавливается браузером и, как правило, выглядит не очень красиво. Разработчики Joomla позаботились об этом и сделали возможным создавать более презентабельные подсказки, генерируемые JavaScript библиотекой из дополнительного атрибута data-original-title. Такие подсказки по умолчанию будут иметь такой вид. Давайте рассмотрим, как создавать такие подсказки в Joomla.
По умолчанию в Joomla версии 3.x (Тестировалось на версии 3.4.5) со стандартным шаблоном поддержка всплывающих подсказок уже включена. Для добавления всплывающих подсказок на страницы вашего сайта следует добавить к тегу элемента, у которого должна будет всплывать подсказка, класс hasTooltip и атрибут data-original-title, из которого и будет браться подсказка. Если у элемента задан атрибут title, то подсказка будет браться из него. Например:
<span class="hasTooltip" data-original-title="<strong>Я маленькая подсказка</strong><br/>Я что-то описываю и делаю Мир лучше :)">наведи на меня курсор</span>В результате чего получим: наведи на меня курсор
Как вы могли заметить, в подсказках такого типа можно использовать HTML теги, что позволяет произвести разметку их содержимого.
В дальнейшем для всех желающих я опишу создание подсказок с использованием behavior.tooltip.
Комментарии
RSS лента комментариев этой записи