Авторизация

Рубрики блога


Рекомендуем



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

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
20
Май

Style-my-tooltips - jQuery плагин для стилизации подсказок атрибута title

рейтинг материал 5.0 (3) | количество просмотров 2116 | количество коментариев 0
Небольшой по размерам плагин для настройки внешнего вида всплывающих подсказок в ссылках и любых других элементах с прописанным атрибутом title
View demo Download source

К преимуществам плагина можно отнести небольшой размер, а также гибкость настройки внешнего вида через настройки CSS, которые не запрятаны в javascript коде, а вынесены отдельно.

Собственно сам CSS код, изменяя который вы можете настроить внешний вид подсказки tooltip:

#s-m-t-tooltip{
 position:fixed; 
 max-width:300px; 
 padding:6px 8px 8px 8px; 
 background:#222; /*цвет заливки подсказки*/
 z-index:10; 
 display:inline-block; /*Важно!*/
 /*шрифт*/
 font-family:Verdana, Geneva, sans-serif; 
 font-size:11px; 
 line-height:16px;
 color:#fff; /*цвет шрифта подсказки*/
 /*скругленные углы css3*/
 -moz-border-radius:5px; 
 -khtml-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px;
}

После настройки CSS, необходимо скачать прикрепления к этой статье и загрузить файл jquery.style-my-tooltips.js на ваш сайт.

Теперь, подключаем сам плагин, ссылку на javascript файл и код с настройками, которые лучше разместить перед закрывающимся тегом body:

<script type="text/javascript" src="/jquery.style-my-tooltips.js"></script>
<script type="text/javascript"> 
$().ready(function() { 
 // Используется для всех элементов с атрибутом title. 
 // Измените на ".class[title]" для выбора только элементов с классом .class и атрибутом title
 $("[title]").style_my_tooltips({ 
 tip_follows_cursor: "on", //включить/выключить привязку к курсору мыши
 tip_delay_time: 500 //миллисекунды
 }); 
}); 
</script> 

Если яваскрипт-файл загрузили в какую-то папку в файловом древе вашего сайта, а не в корневую директорию, то, в коде выше, часть строки /jquery.style-my-tooltips.js нужно заменить на ссылку к файлу.

По-умолчанию плагин обрабатывает все обьекты на странице, у которых есть универсальный атрибут title, но при желании стилизацию подсказок можно задать только определенному классу - например всем элементам с классом tooltip, в таком случае в коде с настройками нужно будет заменить строку:

$("[title]").style_my_tooltips({ 

на

$(".tooltip[title]").style_my_tooltips({ 

PS На всякий случай, напоминаю, что яваскрипт использует библиотеку jQuery, то есть для работы плагина необходимо чтобы к сайту была подключена библиотека версии не ниже чем 1.4

View demo Download source
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]