Хаки и Скрипты Next Generation CMS

Красивые всплывающие подсказки через easyTooltip

irbees2008 irbees2008 Опубликовано - 9 - сентября Tooltips
2574 - 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;
}

Можешь почитать и вот эту статейку "Шпаргалка О TWIGе"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [19]
  • Гости: [18]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 0.284сек
  • Потребление памяти: 5.160 Mb 
  •   Яндекс.Метрика