Скрипт для вывода всплывающих подсказок

Speech Bubbles Tooltip позволяет добавлять всплывающие подсказки, текст которых содержится либо в атрибуте title ссылки, либо представлен в виде HTML текста в отдельном файле, который подгружается с помощью AJAX. Стиль вывода подсказок не использует никаких изображений, только приемы CSS.

Подсказки

 

Speech Bubbles Tooltip использует скругленные углы  и тени CSS3. подсказки отлично выглядят в FF3+, Opera 9+, и Google Chrome/ Safari 4+. В IE7 и IE8 подсказки сохраняют свою функциональность без эффектов CSS3.

Использование.

Шаг 1.

Добавляем следующий код в секцию head страницы, на которой нужно организовать подсказки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="speechbubbles.css" />

<script src="speechbubbles.js"></script>

<script type="text/javascript">

	jQuery(function($){ //По наступлению события document.ready
 		//Применяем подсказки для ссылок с классом "addspeech", а текст для подсказок будем искать в файле 'speechdata.txt'
		$('a.addspeech').speechbubble({url:'speechdata.txt'})
	)

</script>

В данном коде используются три файла, которые можно найти в архиве со скриптом (speechbubbles.css, speechbubbles.js и speechdata.txt). По умолчанию, они размещаются в том же каталоге, что и веб страница.

Шаг 2.

В HTML коде установить для ссылок с подсказками класс addspeech и значение атрибута rel,  которое соответствует тексту нужной подсказки в файле speechdata.txt

<p>Например, &quot;<a href="http://ruseller.com/lessons.php?rub=37&id=296" class="addspeech" rel="#speechbubble1">Загрузка больших файлов на сервер используя PHP</a>&quot;,
или &quot;<a href="http://ruseller.com/lessons.php?rub=2&id=67" class="addspeech" rel="#speechbubble2">Двойные кавычки для цитаты</a>&quot;, 
или &quot;<a href="http://ruseller.com/lessons.php?rub=32&id=92" class="addspeech" rel="#speechbubble3">Меняющийся информационный блок на jQuery</a>&quot;,
или &quot;<a href="http://ruseller.com/lessons.php?rub=40&id=513" class="addspeech" rel="#speechbubble4">Создание пользовательской панели опций в Wordpress</a>&quot;.</p>

По умолчанию скрипт устанавливает всплывающие подсказки для всех ссылок с классом addspeech. При инициализации скрипта устанавливается файл, из которого будут загружаться подсказки (смотри шаг 1).

Стиль вывода подсказок устанавливается с помощью CSS кода файла speechbubles.css.

 

Два способа задания текста подсказок

Существует два способа задания текста для подсказок:

Способ 1.

Текст подсказки устанавливается в качестве значения атрибута title ссылки с классом addspeech :

<a class="addspeech" href="#" title="Текст подсказки">Текст ссылки</a>

Скрипт автоматически будет использовать значение атрибута title для подсказки.

Способ 2.

Разметка подсказок подготавливается в другом файле (в примере это файл speechdata.txt). Данный метод позволяет организовать централизованное хранение подсказок, что будет очень удобно при разработке растущего проекта.

Формат разметки подсказок следующий:

<div>

<div id="speechbubble1" class="speechbubbles">
Пример подсказки №1.
</div>

<div id="speechbubble2" class="speechbubbles">
Пример подсказки №2. Выделяем <b>часть текста</b>. 
</div>

<div id="speechbubble3" class="speechbubbles">
Пример подсказки №3.
</div>

<div id="speechbubble4" class="speechbubbles">
Пример подсказки №4.
</div>

</div>

А в HTML коде страницы для ссылки используется атрибут rel, значение которого содержит id  нужной подсказки: 

<a class="addspeech" href="#" title="Название ссылки" rel="speechbubble1">Пример использования ссылки</a>

В данном примере для подсказки будет использоваться текст элемента с id speechbubble1 из файла speechdata.txt.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Февраля 2011 10:29
    Overlord888
    Опять повтор. Подобное уже было.
    • 11 Апреля 2011 11:49
      Zorg68
      где?
  • 19 Июня 2011 16:13
    nick_200987
    Автор кто???
  • 1 Июля 2011 08:40
    Morty
    В dle 9.3 не работает.
  • 8 Сентября 2011 12:50
    Виталя42
    В opera 11.51 не работает.
    • 7 Октября 2011 09:33
      SashaKKKKK
      Все работает. По крайней мере в примере 100% работает.!
  • 4 Июня 2012 13:33
    Kvakin
    Синтаксическая ошибка в строке 12 и в скрипте тоже - Dreamweaver говорит.
  • 29 Июня 2012 05:53
    rost_kmt
    плохо что на 1.7.1 уже непашет... а 1.4.4 мне ненужен(( Есть выход? Чтобы использовать jquery 1.4.4 только для этой функции както
  • 30 Сентября 2012 17:19
    lemad
    Не работает :( Демо (если скачать) тоже не пашет. Время зря убил.
^ Наверх ^