Хаки и Скрипты 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;
}

Можешь почитать и вот эту статейку "Удаление дублей страниц"

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

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