Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Красивые всплывающие подсказки для Joomla.
Будут полезны для пояснения или подсказки пользователям вашего сайта.
И придадут вашему сайту индивидуальность.

Всплывающие подсказки на CSS

Пример работы подсказок:

Для создания функционального сайта рекомендую CMS JoomlaЭто мощнейшая система управления контентом. Она может переплюнуть даже платные аналоги!. Обращаю ваше внимание на то, что нужно использовать последние стабильные версии!Это версии которые прошли тестирование и готовы к использованию на рабочих сайтах.

Мы всегда с вами, JoomlaTown.netЭлектронное издание о CMS Joomla.
Уроки, статьи, курсы и поддержка для вебмастеров.

Есть специальный плагин для этих целей, но он подгружает дополнительный скрипт и создаёт лишние запросы к БД.

Я не сторонник обвешивания сайта всякими расширениями, для меня лучше сделать это всё руками.
Поэтому разберём другой способ. Более красивый и лёгкий, в плане нагрузки на сайт.

Я уже не помню где это нашёл, было это давно.
Немного доработал и хочу поделиться с вами.
Думаю автор не обидится на меня.

Сразу хочу предупредить, включение этого эффекта не слишком удобно, придётся открывать HTML-редактор и в нём вписывать кое какие теги.
В плагине тоже самое, необходимо вписывать теги. Поэтому по удобности эти способы одинаковые.

Но не стоит отчаиваться.
Если создать для себя текстовый файл с необходимыми тегами, и путём копирования/вставки можно легко решить эту проблему.

Приступим!

Для вставки всплывающей подсказки будем использовать тег <a>
А для вывода текста в ней тег <span>

Внимание: для просмотра закрытого материала введите пин-код.

{SCM_99_2_0}

HTML код который небходимо вставлять:

<a class="tooltip">анкор<span class="tt-info">Текст подсказки</span></a>

Создадим для подсказок три класса:

  • tt-info - для вывода информационной подсказки
  • tt-warning - для предупреждения
  • tt-alt - для альтернативного текста

и путём подставки нужного класса к тегу <span> будем менять стиль подсказок.

CSS стили:

Для анкора:

.tooltip {
border-bottom:1px dotted #000000;
color:#000000;
outline:none;
cursor:help;
text-decoration:none!important;
position:relative;
}

Спрячем текст подсказки при помощи отрицательного margin-left:

.tooltip span {
margin-left:-999em;
position:absolute;
}

Вызов подсказки (при наведении):

.tooltip:hover span {
font-family:Georgia;
position:absolute;
color:#333;
left:10px;
top:20px;
z-index:99;
margin-left:0;
width:250px;
}

Оформление блоков подсказок

Информация:

.tt-info { 
display:block;
padding:35px 10px 5px 42px;
background: url('../images/tt-info.png') no-repeat 5px 5px #9bd2fc;
border:1px solid #0390fc;
border-radius:5px;
}

Предупреждение:

.tt-warning {
display:block;
padding:35px 10px 5px 42px;
background: url('../images/tt-warning.png') no-repeat 5px 5px#fbecca;
border:1px solid #e04326;
border-radius:5px;
}

Альтернативный текст:

.tt-alt {
display:block;
padding:10px;
background:#333;
color:#eee!important;
border:1px solid #222;
border-radius:5px;
opacity:.9;
}

В альтернативной подсказке используется тег <em> как небольшой заголовок.
Стиль для него:

.tt-alt em {
color:#9fd4ff;
}

Все эти стили помещаете в любое удобное место CSS файла вашего шаблона.

Плюс ко всему этому в исходниках есть два изображения, их копируете в папку images вашего шаблона.

При необходимости можно изменить оформление подсказок так как вам хочется, поменять картинки и т.д.
Или создать дополнительные классы для других видов подсказок.
Тут всё просто.

К статье прилагаю архив с исходниками (вверху).

  • 2 изображения (в .png и .psd)
  • CSS файл
  • HTML шпаргалку

{/SCM_99_2_0}

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!