Хаки и Скрипты Next Generation CMS : Tooltips, Интерфейс : Красивые всплывающие подсказки через easyTooltip

irbees2008 Опубликовано - 9 - сентября Tooltips

Адаптировал: 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;
}

Можешь почитать и вот эту статейку "Изменил дату новости ,но новости нет на главной"

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

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