jQuery скрипт — Tooltip (WM)
Четверг, Август 27, 2009 9:48Рубрики: jQuery, Программирование
Искал я недавно универсальный jQuery скрипт tooltip с гибкими настройками. Я не смог найти подходящего. Можно было конечно редактировать готовые, но я решил сделать свой скрипт.
Скрипт нужно только подключить на страницу где уже подключен jQuery и все.
Настроить скрипт для себя может любой, кто знает основные моменты html и базовые знания css. Даже если нет, то я закомментировал все настройки и вы можете эксперементировать.
Настройки внешнего вида:
var BgColor = "#fff"; // Цвет фона tooltip'a.
var BgImage = "url('')"; // Картинка на фоне.
var BgRepeat = "no-repeat";
var BgPosition= "left top";
var FontColor = "#414141"; // Цвет текста.
var FontSize = "13px"; // Размер шрифта.
var FontFamily = "Arial"; // Шрифт.
var FontWeight = "normal"; // Толщина шрифта.
var Opacity = 0.9; // Прозрачность.
var BorderWidth = "1px"; // Ширина обрамления.
var BorderStyle = "dashed"; // Стиль обрамления.
var BorderColor = "#ccc"; // Цвет обрамления.
var Padding = "2px 5px"; // Внутренние отступы.
var MinWidth = "0px"; // Минимальная ширина.
var MaxWidth = "300px"; // Максимальная ширина.
var TextAlign = "left"; // Расположение текста внутри.
var BgImage = "url('')"; // Картинка на фоне.
var BgRepeat = "no-repeat";
var BgPosition= "left top";
var FontColor = "#414141"; // Цвет текста.
var FontSize = "13px"; // Размер шрифта.
var FontFamily = "Arial"; // Шрифт.
var FontWeight = "normal"; // Толщина шрифта.
var Opacity = 0.9; // Прозрачность.
var BorderWidth = "1px"; // Ширина обрамления.
var BorderStyle = "dashed"; // Стиль обрамления.
var BorderColor = "#ccc"; // Цвет обрамления.
var Padding = "2px 5px"; // Внутренние отступы.
var MinWidth = "0px"; // Минимальная ширина.
var MaxWidth = "300px"; // Максимальная ширина.
var TextAlign = "left"; // Расположение текста внутри.
Настройки анимации:
var FadeIn = 300; // Скорость появления. | Совет: Одно из значений не используйте.
var FadeOut = 0; // Скорость исчезновения. | Время в миллисекундах.
var Left = 15; // Отступ слева от курсора мыши.
var Top = 8; // Оступ сверху от курсора мыши.
var FadeOut = 0; // Скорость исчезновения. | Время в миллисекундах.
var Left = 15; // Отступ слева от курсора мыши.
var Top = 8; // Оступ сверху от курсора мыши.
Настройки содержимого:
var Links = "a"; // Для чего использовать ToolTip (a, div и т. п.).
var Result = "title"; // Что выводить в tooltip.
var Result = "title"; // Что выводить в tooltip.
Все это вы сможете редактировать в скрипте.
Вы можете следить за любыми ответами на эту запись через RSS 2.0 feed.
Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Loading ...
Arti сообщил:
Август 27th, 2009 17:04
Изобретение велосипеда. В jquery тултипов валом. Не пойму, зачем использовать разный стиль для всех тултипов и настраивать их через JS? В чём смысл?
WebMast сообщил:
Август 27th, 2009 17:55
Arti, можно и через css. Но в некоторых случаях tooltip очень полезен...
Arti сообщил:
Август 28th, 2009 0:49
нет, я не к тому говорю... в своих проектах тоже юзают tooltipы разные... но ведь уже есть готовые решениЯ... и они на любой вкус
WebMast сообщил:
Август 28th, 2009 11:19
Ну конечно, их валом... Но в основном, каждый пытается сделать для всех, то есть кучу многочисленных настроек. Мой весит ~4 киБ со всеми наворотами. Я не сравнивал с другими, но думаю мой весит меньше...
str сообщил:
Август 28th, 2009 16:21
А еще фишка в том, что многие браузеры (я юзаю хром) выводят свою подсказку поверх «вашей»
Получается бессмысленно.
WebMast сообщил:
Август 28th, 2009 16:47
str, стандартная подсказка в хроме статическая. Мой же tooltip следует за мышкой.
str сообщил:
Август 28th, 2009 22:57
Не, насчет тултипа — это классно, не спорю, я к тому, что стандартная подсказка портит все впечатление
От этого наверно не избавиться.
WebMast сообщил:
Август 29th, 2009 8:19
Аа... Ну да, хромовская подсказка прям на мою, все не так как хотелось : (.
Лихтов сообщил:
Август 29th, 2009 8:40
я-ху-ху... Вот он родненький! )
user сообщил:
Март 16th, 2010 23:15
Скрипт отличный! Весит мало. Только в IE7 — совсем не работает, а в IE8 выводит стандартную подсказку поверх скриптового tooltip.
Было бы здорово, если бы Вы доработали этот скрипт — тогда можно было бы конкурировать со скриптами от jquery