Стандартные всплывающие подсказки выглядят надо сказать очень и очень бледно. С помощью библиотеки jQuery и небольшого плагина к ней мы легко сможем использовать всплывающие подсказки (tooltip) с пользовательским оформлением.

Для начала небольшой пример, который продемонстрирует, как такие подсказки могут выглядеть. Для примера выбраны обычная ссылка – элемент а и элемент input.

Пожалуйста, примите во внимание, что пример мне приходится демонстрировать во фрейме.

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

Файлы необходимые для реализации подключаем в раздел HEAD, их всего три – это сама библиотека jQuery, файл jquery.dimensions.js и файл для работы с подсказками jquery.tooltip.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>

Дальше немного посмотрим на таблицу стилей, вернее на ту ее часть, где мы можем оформить нашу всплывающую подсказку.

#tooltip {
  position: absolute;
  z-index: 3000;
  width:250px;
  border: 1px solid #269;
  background-color: #48b;
  padding: 0;
  opacity: 0.85;
  color:#fff;
}
#tooltip h3 {
  background-color: #269;
  padding-left:5px;
  font-weight:bold;
  font-size:1.4em;
}
#tooltip div {
  padding-left:5px;
  padding-right:5px;
}

#tooltip – это и есть подсказка. Мы задаем абсолютное позиционирование, изымая таким образом подсказку из общего потока, а свойству z-index задаем заведомо большое значение, чтобы расположить подсказку «выше» элементов страницы. Дальше ничего сложного нет вообще нет. #tooltip h3 – это заголовок подсказки, в элементе #tooltip div – текст подсказки. Вообще здесь важно только сохранить название идентификатора #tooltip, все остальное – на Ваш вкус.

Дальше приведу пример кода вызова наших всплывающих подсказок.

<script type="text/javascript">
$(document).ready(function(){
  $("a, input").tooltip({
    track: true,
    delay: 100,
    showBody: "::",
    opacity: 0.85
  });
});
</script>

Указываем элементы a и input в качестве элементов, для которых будут вызываться всплывающие подсказки. Но это еще не все. Необходимо, чтобы эти элементы имели атрибут title. Именно его значение используется для формирования подсказки.

Обратите внимание на опцию showBody. В ней можно указать разделитель. Часть до разделителя будет показана в заголовке подсказки, оставшаяся часть в теле подсказки.
Опция track: если установлена в true – подсказка будет «привязана» к указателю мыши.
delay – отсрочка появления подсказки в миллисекундах, по умолчанию установлено значение 250.
opacity: 0.85 – прозрачность (ну конечно не для IE).

Я как всегда привел лишь несколько из возможных опций, список их несколько шире. Найти полный перечень можно на сайте разработчиков.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal