• 100
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

Всем привет , и вот новый скриптик ,может и не новый только у меня он хранится уже почти год )). Просто может кому и пригодится. Скрипт простенький, доплнительной разметки и тегов не нужно, просто наличие тега title там где он нужен. Подобных скриптов много в сети, уже был подобный, но здесь еще tooltip используется как информационный блок.
Ну вот пример ссылки

Код:
<a href="Здесь ссылка" title="<b>Ну здесь сам title</b><br/><br/>Ну а здесь выводим небольшой текст"/>Здесь текст кнопки</a>

И так приступим
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , рапоковываем и заливаем файл tooltip.js в ваш шаблон в папку js
2. В main.tpl между добавить следующий код:
Код:
<script type="text/javascript" src="{{ tpl_url }}/js/tooltip.js"></script>
<script>$(document).ready(function() {$("a").easyTooltip()}); $(document).ready(function(){$("img").easyTooltip()}); </script>

3. Ну и в файл стилей добавить стилей:
Код:
/*Tooltip - всплывающие подсказки*/
#easyTooltip{
max-width: 300px;
padding:10px;
border:1px solid #000;
background:#000;
color: #ccc;
border-radius: 6px;
opacity: 0.8;
font-size: 15px ;
z-index: 9999;
box-shadow: 0px 0px 15px #000;
}

Можешь почитать и вот эту статейку " Лайтбокс эффект для Bootstrap"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

----