Я хочу поделиться с вами очередным небольшим jQuery-скриптом, который поможет украсить ваш веб-ресурс.

Установка

Код скрипта выглядит следующим образом:

Code

(function($){ <br> $(function() { <br><br>  $('span.jQtooltip').each(function() { <br>  var title = $(this).attr('title'); <br>  if (title && title != '') { <br>  $(this).attr('title', '').append('<div>' + title + '</div>'); <br>  var width = $(this).find('div').width(); <br>  var height = $(this).find('div').height(); <br>  $(this).hover( <br>  function() { <br>  $(this).find('div') <br>  .clearQueue() <br>  .animate({width: width + 20, height: height + 20}, 200).show(200) <br>  .animate({width: width, height: height}, 200); <br>  }, <br>  function() { <br>  $(this).find('div') <br>  .animate({width: width + 20, height: height + 20}, 150) <br>  .animate({width: 'hide', height: 'hide'}, 150); <br>  } <br>  ) <br>  } <br>  }) <br><br> }) <br> })(jQuery)<br>

Сохраните его в файл с расширением .js, например, scripts.js и
подключите к сайту перед тегом </head>, не забыв одновременно
подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код
сайта добавляется такой код:

Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ПУТЬ_ДО_ФАЙЛА_НА_ВАШЕМ_САЙТЕ/scripts.js"></script>

Далее нужно добавить в CSS-файл вашего сайта следующие стили:

Code

.jQtooltip { <br>  position: relative; <br>  cursor: help; <br>  border-bottom: 1px dotted; <br> } <br> .jQtooltip div { <br>  display: none; <br>  position: absolute; <br>  bottom: -1px; <br>  left: -1px; <br>  z-index: 1000; <br>  width: 190px; <br>  padding: 8px 12px; <br>  text-align: left; <br>  font-size: 12px; <br>  line-height: 16px; <br>  color: #000; <br>  box-shadow: 0 1px 3px #C4C4C4; <br>  border: 1px solid #DBB779; <br>  background: #FFF6BD; <br>  border-radius: 2px; <br> } <br> .jQtooltip.mini { <br>  display: inline-block; <br>  vertical-align: bottom; <br>  font-size: 11px; <br>  width: 14px; <br>  line-height: 13px; <br>  text-align: center; <br>  margin-left: 2px; <br>  top: -2px; <br>  color: #9A4D18; <br>  border: 1px solid #FAD28F; <br>  background: #FFF6BD; <br>  border-radius: 2px; <br> } <br>

Теперь осталось поместить необходимый текст в тег <span> с классом jQtooltip и атрибутом title, т.е. вот так:

Code

<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>

Если вы желаете, чтобы вместо текста был квадратик, как на скриншоте, тогда используйте вот этот код:

Code

<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>

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

Вот, собственно, и все.

P.S. Не сомневаюсь, что скрипт можно сделать и более грамотным, но меня, в принципе, устраивает и то, что получилось.