Сегодняшний урок будет посвящен созданию всплывающих подсказок, которые будут помогать пользователю правильно заполнить любую форму.
Если форма внушительных размеров с множеством полей, данный плагин будет очень полезен. Как только пользователь помещает курсор в необходимо поле, возле него всплывает красивое окно с описанием. Более того, в всплывающем окне будет также кнопка, которая позволит запретить показ подобных подсказок в дальнейшем (т.е. если юзеру такие подсказки не нужны, тогда он может их легко отключить).
Для корректной работы данного плагина нам понадобятся: таблица стилей (1 штука), javascript файла (2 штуки). Подключаем их в шапке документа следующим образом:
<link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
Далее оформляем наши поля следующим образом:
<table>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box"></td>
</tr>
....
</table>
В данном примере была использована таблица для оформления полей формы, но это не обязательно. Обязательным является параметр tooltipText, который находится внутри тега <input>. В данном параметре задается текст всплывающего окна.
После этого перед закрывающим тегом </body> нам необходимо запустить функцию с параметрами:
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
У данного плагина множество возможных параметров. Можно менять текст, цвет, расположение и прочее... Можете смело экспериментировать и добиваться уникальных результатов. Все настройки находятся в файле form-field-tooltip.js. Вот, например, настройки текста кнопок в всплывающих окнах:
this.closeMessage = 'Закрыть';
this.disableTooltipMessage = 'Не показывать больше подсказки';
На сегодня все. Всем удачи!