Небольшой по размерам плагин для настройки внешнего вида всплывающих подсказок в ссылках и любых других элементах с прописанным атрибутом title
К преимуществам плагина можно отнести небольшой размер, а также гибкость настройки внешнего вида через настройки 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