Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Всплывающая подсказка Tooltip

Подсказки для сайта

Если вам нужны легкие, красивые и кроссбраузерные подсказки, то эта статья для вас. Эти подсказки можно использовать не только для ссылок, но и для простого текста или блока. Для стиля подсказок не используются изображение а только css код размером всего 3.5kb

Подсказки для сайта
Для того, чтобы их установить нужно сделать несколько простых шагов.
1. Подключаем нужные стили и скрипты для работы Tooltip 

Подключаем jquery библиотеку (Может она у вас уже подключена). Для этого нужно прописать между тегами <HEAD></HEAD> вашей страницы следующее:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»></script>

После чего подключаем скрипт для работы подсказки:

<script type=»text/javascript» src=»js/jquery.tipTip.js»></script>

Не забываем про файл стилей:

<link href=»css/tipTip.css» rel=»stylesheet» type=»text/css» />

ПРИМЕТКА:

js/ — это путь к папке, где расположен сам скрипт
css/ — путь к файлу стилей

Далее просто размещаем один из скриптов скрипт :

Вариант №1 (Стандартные подсказки)

<script>
$(function(){
$(".someClass").tipTip();
});

</script>

Вариант №2 (С определенными параметрами)

<script>
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});

</script>

ПРИМЕТКА:

.someClass — это класс, который нужно прописывать к ссылке или тексту.
Например:
Если ваша ссылка выглядит фот так <a href=»site.com»  title=»Это текст в вашей подсказке»>Ваша ссылка</a> то вам нужно добавить класс .someClass и в итоге мы должны получить:
<a href=»site.com» title=»Это текст в вашей подсказке» class=»someClass»>Ваша ссылка</a>,
Если у вас уже есть класс к ссылке например: <a href=»site.com» title=»Это текст в вашей подсказке» class=»my-class»>Ваша ссылка</a> , то замените .someClass в скрипте на .my-class, тоесть скрипт должен выглядеть вот так
<script>
$(function(){
$(".my-class").tipTip();
});

</script>

Вот список некоторых настроек ToolTip если Вы хотите использовать Варианта №2 :

  • activation («hover» по умолчанию) — когда должен срабатывать tooltip.Есть три варианта: «hover», «focus» или «click» (при наведении, при активации поля ввода, или при клике соответственно).
  • keepAlivetrue или false (false по умолчанию) — При наведении подсказка всплывает, а после отведения исчезает. Если поставить параметр true то подсказка не будет исчезать.
  • maxWidth(«200px» по умолчанию) — CSS max-width Параметр максимальной ширины подсказки.Можно использовать в процентах, пикселях или ‘auto’.
  • edgeOffset (3 по умолчанию) — Дистанция подсказки от элемента.Измеряется в пикселях.
  • defaultPosition:(«bottom» по умолчанию) — Позиция подсказки от елемента. Можно использовать следующие варианты: «top», «bottom», «left» или «right» (вверху, внизу, слева или справа).
  • delay (400 по умолчанию) -Задержка перед показом подсказки после наведения мыши на элемент.
  • fadeIn(200 по умолчанию) — Скорость показа окна.
  • fadeOutnumber (200 по умолчанию) —  Скорость исчезновения окна.
  • attribute(«title» по умолчанию) — HTML  тег из которого tooltip должен брать содержимое.
  • content(false по умолчанию) — можно ли использовать любой html тег для подсказки. Варианты true или false.
2. Пример HTML кода Tooltip (для проверки работы вставьте в нужном месте на вашем сайте между тегами <BODY></BODY>)

<div style=»width: 300px; margin: 0 auto;»>
<p style=»width: 300px;»>
Для того чтобы увидеть как работают подсказки tooltip наведите на эту <a href=»» class=»someClass» title=»Здесь вы можете написать текст для вашей ссылки.»>ссылку</a>, Или наведите на это изображение</p>
<span id=»foo»>
<center>
<img src=»image.jpg» class=»someClass» title=»Текст к изображению» width=»150″ height=»150″ />
</center>
</span>
</div>

Чтобы посмотреть как работают подсказки можете посмотреть Пример.

Скачать исходники вы можете по этой ссылке —>

Если у вас возникли вопросы, то задавайте их в комментариях.