Как создать всплывающие подсказки в Joomla






Для чего нужны всплывающие подсказки?

Всплывающие подсказки — это незаменимый элемент любого качественного сайта. Их главное предназначение заключается в отображении дополнительной информации о разных элементах сайта. Их можно подключить к пунктам меню, что позволяет показывать пользователям сайта их детальное описание. Неплохим решением будет отображение подсказок при наведении курсора на поля различных веб-форм, например, на поле пароля в форме регистрации. В такой подсказке можно указать требования к длине пароля и используемых символах.

Установка движка на хостинг https://s-host.com.ua/ прошла успешно и теперь можно разобраться с расширениями для Joomla-сайта. Начнем с создания подсказок, всплывающих при наведении курсора на слово или фразу. Для реализации задуманного подойдет плагин JT CSS tooltip.

 

Устанавливается он также, как и любые другие расширения для движка Joomla:

  • скачайте плагин JT CSS tooltip;

  • перейдите в раздел “Расширения”/“Менеджер расширений”/“Установить”;

  • загрузите и установите файл пакета.

 

После этого обязательно перейдите на страницу “Расширения”/“Менеджер плагинов” и включите JT CSS tooltip.

Создание всплывающих подсказок

Перейдите на страницу с текстом, в котором будут созданы подсказки:

  • откройте исходный код;

  • выберите слово/фразу, к которому будет относиться подсказка;

  • используйте для слова/фразы следующую “комбинацию”: <a title=”подсказка” class=»jt-tooltip»>слово с подсказкой</a>:

Подчеркнем, что крайне важно указать класс jt-tooltip, ведь в противном случае вам не удастся реализовать функцию всплывающих подсказок на страницах веб-портала. Кроме того, не забудьте сохранить изменения, прежде чем перейти на свой сайт, чтобы проверить, как работает плагин JT CSS tooltip:

При желании вы также можете редактировать такие параметры как цвет фона и текста подсказки. Для этого нужно:

перейти в папку сайта при помощи файлового менеджера или ФТП-клиента;

открыть в режиме редактирования файл /plugins/system/extcsstooltip/extcsstooltip.php;

внести правки в строки:

background: rgba(0,0,0,.8); (фон);

color: #fff; (текст):

Как сделать красивое оформление всплывающих подсказок при помощи CSS?

 

Для этого откройте файл /plugins/system/extcsstooltip/extcsstooltip.php и найдите CSS-класс .ext-tooltip:hover:after. Редактируя свойства этого класса, вы можете изменять внешний вид подсказок. Можно установить внешние (margin) и внутренние (padding) отступы, настроить шрифты, изменить фон, установить закругленные рамки и т. д.

 

Пример CSS-класса, который сделает подсказку с черным фоном, белым текстом и закругленной рамкой:

 

.ext-tooltip:hover:after{

background: #000000;

text-color: #FFFFFF;

border-radius: 3px;

}

 

Обратите внимание на то, что в примере выше не указаны свойства позиционирования: left, bottom. Если вы не хотите их изменять, оставьте их значения без изменений.

 




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

  

  

Каталог@MAIL.RU - каталог ресурсов интернет