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

Если данный инструмент использовать грамотно, то он может улучшить пользовательский интерфейс и Ваш сайт станет выглядеть более дружелюбно, поднимет впечатления у посетителей о Вашем ресурсе, а также Вы спасёте много пространства от заполнения мешающей информацией. Сегодня мы рассмотрим основные виды всплывающих подсказок, основанных на jQuery.

Согласитесь, что стандартные html подсказки выглядят не очень красиво, поэтому были придуманы различные способы их модификации. Вообще, я заметил в интернете три способа показа всплывающих подсказок(с помощью jQuery):

1. Использование местного контента. В данном методе содержится два HTML элемента, расположенных на одной и той же странице. Первый является главным, а второй используется для вывода текстовой подсказки. Идентифицируются они при помощи java скрипта, обычно, по стилевым атрибутам. Вот пример:

<a class="local" href="site.ru" rel="#loadme">Наведи курсор на меня</a>
<div id="loadme">Этот текст появится в подсказке</div>

О том как работает этот вариант можно почитать в статье «Всплывающие подсказки jQuery». Существует и другой способ показа всплывающих окон такого типа, пример HTML-кода, которого приведен ниже:

<span id="example-target-1">Наведи курсор на меня</span>
<div id="example-content-1">Этот текст появится в подсказке</div>

2. Это стандартный метод показа подсказок, который используется в HTML по умолчанию. Но мы можем улучшить его внешний вид с помощью jQuery. Текст для подсказки прописывается непосредственно в свойстве title. Данный способ позволяет легко показывать подсказки, когда мышь пользователя парит над или, возможно, кликает на любой элемент, который вы назначите в настройках скрипта. Если объект содержит атрибут title, его текст становится подсказкой.

<a id="load" href="houdini.html" title="Текст который Вы увидите в подсказке">Надо мной</a>

Попробуем этод способ показа текстовых подсказок.

3. Текст выводится с помощью Ajax. То есть Вы создаете отдельный файл с нужной информацией, прописываете к нему путь в определённом атрибуте(как правило, rel) и содержание подсказки генерируется «налету» при наведении мыши на объект. В HTML это будет выглядеть следующим образом:

<a class="ajax" href="content.html" rel="fragment.html">Покажи мне подсказку</a>

Таким образом, в нашем случае, мы превращаем файл fragment.html в всплывающую подсказку Ajax.