Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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>

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

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

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

2 thoughts on “Всплывающая подсказка Tooltip”

  1. Marv:

    Уже перерыл пол интернета и вот напал на ваш пост, спасибо Tooltip работает прекрасно и корректно.

  2. WilliamCody:

    Уже встречался с этими подсказками, но не понимал как нужно их установить… Спасибо за пост!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X