Сегодня хочу начать еще одну рубрику сайта, где я буду время от времени представлять уже готовые скрипты, найденные мною на просторах интернета (в основном это англоязычный сегмент интернета). Если потребуется, то я их немного модернизирую (читай - переведу) и выложу в свободный доступ. Вот сегодня начну с простого скрипта всплывающих подсказок, написанный на языке JavaScript, который на буржуйском языке носит название Sticky Tooltip script.
Этот скрипт добавляет так называемый Тултип (ToolTip – всплывающая подсказка) к HTML элементам, когда указатель мыши проходит над ними. Эта подсказка может быть закреплена нажатием клавиши “s” или правым щелчком мыши чтобы дать доступ к элементам, находящимся внутри всплывающей подсказки. Это все лучше один раз увидеть, чем два абзаца описывать)))
Демонстрация (подвигайте мышкой над следующими элементами):
 |
 |
 |
Запорожье - город в Украине, административный центр Запорожской области, расположен на реке Днепр. Является одним из наиболее крупных административных, индустриальных и культурных центров юга Украины.
Москва — столица Российской Федерации, город федерального значения, административный центр Центрального федерального округа и Московской области (в состав которой не входит). Крупнейший по численности населения город России и Европы
Окленд (англ. Auckland) — крупнейший город Новой Зеландии с населением около 1,4 миллиона человек (2008), что составляет более четверти всего населения страны.
Теперь последовательность действий для установки скрипта на страницу.
Шаг 1. Вставить следующий код в тег <head></head> страницы
Этот код требует наличия трех файлов:
- jquery.min.js
- stickytooltip.js
- stickytooltip.css
Их Вы можете скачать одним архивом, бесплатно, с сайта LetitBit (переходите на вкладку «Бесплатно»)
Шаг 2. На странице необходимо сделать HTML разметку по примеру, который показан ниже.
Можете также ориентироваться на общий шаблон:
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Содержимое первого тултипа ...
</div>
<div id="sticky2">
Содержимое второго тултипа ...
</div>
<div id="sticky3">
Содержимое третьего тултипа ...
</div>
</div>
<div class="stickystatus"></div>
</div>
а все элементы, отображаемые с подсказкой должны иметь параметр data-tooltip, оформленный по шаблону:"data-tooltip=tooltipid"
Например:
<a href="http://valex.net.ru" data-tooltip="sticky1">Сайт для веб мастера</a>
Шаг 3 - Настройка
Открывайте файл stickytooltip.js где в первых строчках кода можете увидеть переменные, отвечающие за настройку скрипта:
tooltipoffsets: [20, -30],
fadeinspeed: 1000,
rightclickstick: true,
stickybordercolors: ["black", "darkred"],
stickynotice1: ["Нажмите \"s\"", "или правый клик", "чтобы закрепить"],
stickynotice2: "Нажмите мышкой вне этого блока, чтобы скрыть его",
я оставил там русскоязычные комментарии, так что, думаю разобраться не составит труда.
И еще раз напомню о том что скачать все необходимые файлы можно по этой ссылке.
zox | 24.02.2010, 18:50
Давно искал скрипт всплывающей подсказки, всё просто и понятно объяснено, справится даже новичок.
Вот за этот скрипт большое спасибо!