Создание сайтов > Программирование > jQuery скрипт — Tooltip (WM)

jQuery скрипт — Tooltip (WM)

jQuery скрипт - Tooltip (WM)
Искал я недавно универсальный 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 FadeIn = 300; // Скорость появления. | Совет: Одно из значений не используйте.
var FadeOut = 0; // Скорость исчезновения. | Время в миллисекундах.
var Left = 15; // Отступ слева от курсора мыши.
var Top = 8; // Оступ сверху от курсора мыши.

Настройки содержимого:
var Links = "a"; // Для чего использовать ToolTip (a, div и т. п.).
var Result = "title"; // Что выводить в tooltip.

Все это вы сможете редактировать в скрипте.

Скачать скрипт | Посмотреть пример работы.

27 августа 2009 в 9:4810 комментариев Программирование,

Комментарии — 10 комментариев

  1. #4439 Arti в 17:04, 27 августа 2009:

    Ответить | Цитировать

    Изобретение велосипеда. В jquery тултипов валом. Не пойму, зачем использовать разный стиль для всех тултипов и настраивать их через JS? В чём смысл?

  2. #4440 WebMast в 17:55, 27 августа 2009:

    Ответить | Цитировать

    Arti, можно и через css. Но в некоторых случаях tooltip очень полезен..

  3. #4463 Arti в 0:49, 28 августа 2009:

    Ответить | Цитировать

    нет, я не к тому говорю.. в своих проектах тоже юзают tooltipы разные.. но ведь уже есть готовые решениЯ.. и они на любой вкус 🙂

  4. #4485 WebMast в 11:19, 28 августа 2009:

    Ответить | Цитировать

    Ну конечно, их валом.. Но в основном, каждый пытается сделать для всех, то есть кучу многочисленных настроек. Мой весит ~4 киБ со всеми наворотами. Я не сравнивал с другими, но думаю мой весит меньше..

  5. #4497 str в 16:21, 28 августа 2009:

    Ответить | Цитировать

    А еще фишка в том, что многие браузеры (я юзаю хром) выводят свою подсказку поверх «вашей» 🙂
    Получается бессмысленно.

  6. #4499 WebMast в 16:47, 28 августа 2009:

    Ответить | Цитировать

    str, стандартная подсказка в хроме статическая. Мой же tooltip следует за мышкой.

  7. #4514 str в 22:57, 28 августа 2009:

    Ответить | Цитировать

    Не, насчет тултипа — это классно, не спорю, я к тому, что стандартная подсказка портит все впечатление 🙁
    От этого наверно не избавиться.

  8. #4533 WebMast в 8:19, 29 августа 2009:

    Ответить | Цитировать

    Аа.. Ну да, хромовская подсказка прям на мою, все не так как хотелось : (.

  9. #4535 Лихтов в 8:40, 29 августа 2009:

    Ответить | Цитировать

    я-ху-ху… Вот он родненький! )

  10. #9451 user в 23:15, 16 марта 2010: (подписался)

    Ответить | Цитировать

    Скрипт отличный! Весит мало. Только в IE7 — совсем не работает, а в IE8 выводит стандартную подсказку поверх скриптового tooltip.
    Было бы здорово, если бы Вы доработали этот скрипт — тогда можно было бы конкурировать со скриптами от jquery 😉

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting