jQuery.Tools.Tooltip (Использование подсказок в полях формы)

jQuery.Tools.Tooltip (Предисловие)

Ниже приведенный пример демонстрирует реализацию всплывающих подсказок при установки фокуса на любом из полей формы. Фокус срабатывает как при использовании мыши, так и при перемещении с помощь клавиатуры (клавиша TAB).

HTML-структура.

Текст подсказки указан в атрибуте title каждого элемента формы.
<div class="tooltip"></div>
<form id="myform" action="#">
<h3>Регистрация</h3>
<div id="inputs">
<!-- username -->
<label for="username"Имя</label>
<input id="username" title="Поле может содержать не более 8-ми символов."/><br />
<!-- password -->
<label for="password">Пароль</label>
<input id="password" type="password" title="Чем сложнее пароль, тем труднее его подобрать." /><br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="Ваш email не будет использоваться для почтовых рассылок." /><br />
<!-- message -->
<label for="body">Сообщение</label>
<textarea id="body" title="Введите Ваше сообщение."></textarea><br />
<!-- select -->
<label for="where">Сделайте выбор позиции</label>
<select id="where" title="Выберете одну позицию">
<option>-- Первая позиция --</option>
<option>-- Вторая позиция --</option>
<option>-- Третья позиция --</option>
</select>
<br />
</div>
<!-- email -->
<label>
Я ознакомился и принимаю условия.
<input type="checkbox" id="check" title="Обязательное поле" />
</label>
<p>
<button type="button" title="В данном примере эта кнопка ничего не делает :)">Отправить</button>
</p>
</form>

CSS - стиль

Скин всплывающей подсказки достаточно просто меняется при помощи модификации css-стиля. Ниже представлен стиль используемый в примере, обратите внимание - это чистый css, без использования каких-либо изображений.

/* simple css-based tooltip */
div.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;

/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}

JavaScript код

Всем подсказкам, используемых в примере, назначаем один набор свойств

// Назначаем на все поля ввода всплывающие подсказки.
$("#myform :input").tooltip({

// Где будет подсказка: правый край, по центру поля.
position: "center right",

// Небольшие настройки позиций
offset: [-2, 10],
// Использование встроенного в FadeIn / FadeOut эффекта
effect: "fade",
// Устанавливаем прозрачность
opacity: 0.7,
// Используемый элемент подсказки
tip: '.tooltip'

});

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

источник: Basics of using the tooltip