A- A A+
Расширение для Joomla! - VTEM Tooltip

Отличный плагин для вывода подсказок во всплывающем окне - VTEM Tooltip. Устанавливается на Joomla! 1.5-2.5 из одного архива. Имеет огромное количество настроек оформления, возможны подсказки картинками. Работает на jQuery.

Карточка расширения VTEM Tooltip:

Дополнительная информация

Тип расширения: Плагин
Версия: 1.0
Совместимость: 1.5, 2.5

Шаг 1. Установка плагина VTEM Tooltip

После стандартной установки (РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Загрузить файл пакета), заходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ПЛАГИНОВ.

Здесь находим строку - System - VTEM ToolTip и кликаем по ней.

Установка плагина VTEM Tooltip

Шаг 2. Включение плагина

Включаем плагин в строке "Состояние" раздела Подробно.

Включение плагина VTEM Tooltip

Шаг 3. Основные параметры

В правой части настроек плагина находится раздел Основные параметры:

  • Event– Условие, при котором будет отображаться подсказка.  
    • Mouseover - при наведении курсора мыши
    • Click - при клике
  • Sticky – Устанавливает как будет убрана подсказка. Если "Off" - автоматически. При "On" необходимо закрывать окно вручную.
  • Position - Позиция для появления подсказки. По умолчанию - вверху и по центру (top center).
  • Width - Ширина блока в пикселях. Высота автоматически регулируется в зависимости от объема текста.
  • Duration - Время в миллисекундах до появления подсказки (в одной секунде 1000 миллисекунд).
  • Style - Стили блока.
  • A/SPAN - Теги, которые будет обрамляться подсказка.
  • Rounded corner - Закруглять ли углы блока.
  • Shadows - Тень для блоков подсказок.
  • jQuery load - Если на сайте уже работает библиотека jQuery, выбирайте - "No".

Основные параметры плагина VTEM Tooltip

Шаг 4. Вставка подсказок

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

Вам необходимо скопировать в материал любой выбранный блок, находящийся в фигурных скобках.

После чего изменить текст (ссылки, картинки) находящиеся в квадратных скобках в соответствии с образцами, которыми является сами блоки.

Пример работы плагина VTEM Tooltip

Простая вставка

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки]}

Текст и фото

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Объект, на который наводить курсор для подсказки]}
{vtemtooltip title=[Заголовок подсказки] data=[] link=[]}

Подсказка с затемнением (модальное окно)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] modal=[1] sticky=[1] event=[click] position=[center]}

Красный стиль

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] style=[red]}

Светлый стиль

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] style=[light]}

Темный стиль

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] style=[dark]}

Зеленый стиль

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] style=[green]}

Синий стиль

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] style=[blue]}

Закрывать подсказку вручную

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] sticky=[1]}

Подсказка по клику

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] event=[click]}

Свой размер ширины

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] width=[160]}

Позиция(снизу по центру)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[bottom_center]}

Позиция(Снизу слева)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[bottom_left]}

Позиция(Снизу справа)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[bottom_right]}

Позиция(Сверху по центру)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[top_center]}

Позиция(Сверху слева)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[top_left]}

Позиция(Сверху справа)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[top_right]}

Позиция(справа Сверху)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[rigt_top]}

Позиция(справа по центру)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[rigt_center]}

Позиция(справа снизу)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[rigt_bottom]}

Позиция(слева Сверху)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[left_top]}

Позиция(слева по центру)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[left_center]}

Позиция(слева снизу)

{vtemtooltip title=[Заголовок подсказки] data=[Текст подсказки] link=[Текст, на который наводить курсор для подсказки] position=[left_bottom]}

До новых встреч в новых полезных видео.

 

Комментарии  

#11 0 Алексей 21.12.2015 11:30
Добрый день! Плагин установлен на Joomla 1.7 У меня там есть таблица с именами, код вставлен для каждого имени. Имена повторяются. Но подсказка всплывает только один раз для каждого имени.
Цитировать
#10 0 Луговской Александр 09.04.2015 06:56
Цитирую Дмирий:
...подсказка появляется только на первой картинке

Скорей всего ошибка в набранном коде, перепроверьте.
Цитировать
#9 0 Дмирий 08.04.2015 16:20
У меня в модуле идет подряд несколько картинок. Вставляю для каждой из них код, чтобы выходила отдельная подсказка, но подсказка появляется только на первой картинке((( что не так? Может нужно разделить код каким - либо знаком препинания?
Цитировать
#8 0 Луговской Александр 12.03.2015 07:35
Цитирую Nikolay100:
...В подсказке текст и картинка не показывает картинку. Многие варианты перебрал, никак...

Чтобы помочь Вам нужен доступ к сайту.
Цитировать
#7 0 Луговской Александр 12.03.2015 07:31
Цитирую Андрис:
...версия для Joomla 2,5 будет работать на Joomla 3?

Нет, на Джумле 3 данный плагин работать не будет.
Цитировать
#6 0 Nikolay100 04.03.2015 14:08
Добрый вечер. Помогите пожалуйста.
В подсказке текст и картинка не показывает картинку. Многие варианты перебрал, никак.
У меня Joomla-3.
Cпасибо
Цитировать
#5 0 Андрис 31.01.2015 14:36
Виталий, подскажите версия для Joomla 2,5 будет работать на Joomla 3?
Цитировать
#4 0 Татьяна1 05.11.2012 20:31
Виталий, Вы большая умница! С Вашего сайта и уходить не хочется. Спасибо Вам огромное!
Цитировать
#3 0 Андрей 24.10.2012 22:42
Цитирую Сергей R:
Здравствуйте Виталий, в плагине в подсказках написано что можно вставлять и модули во всплывающих окнах.
Вот подсказка: {vtemtooltip link=[Link text] title=[Module name] source=[module] modid=[32] event=[click] sticky=[1]}
Но у меня так и не получилось это реализовать... Подскажите как это сделать? куда в этот код вписывать модуль?
Спасибо за ответ.

Вот сюда modid=[32] вместо цифр попробуйте поставить id Вашего модуля. Отпишитесь потом в этой ветке по результатам
Цитировать
#2 -1 Сергей R 24.10.2012 21:10
Здравствуйте Виталий, в плагине в подсказках написано что можно вставлять и модули во всплывающих окнах.
Вот подсказка: {vtemtooltip link=[Link text] title=[Module name] source=[module] modid=[32] event=[click] sticky=[1]}
Но у меня так и не получилось это реализовать... Подскажите как это сделать? куда в этот код вписывать модуль?
Спасибо за ответ.
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!