
Сегодня сделаем красивую всплывающую подсказку на Jquery. Пример вы можете наблюдать на , где в исходнике присутствует только то, что необходимо для работы скрипта.
Установка
Код скрипта выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
(function($){ $(function() { $('span.jQtooltip').each(function() { var el = $(this); var title = el.attr('title'); if (title && title != '') { el.attr('title', '').append('<div>' + title + '</div>'); var width = el.find('div').width(); var height = el.find('div').height(); el.hover( function() { el.find('div') .clearQueue() .delay(200) .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { el.find('div') .animate({width: width + 20, height: height + 20}, 150) .animate({width: 'hide', height: 'hide'}, 150); } ).mouseleave(function() { if (el.children().is(':hidden')) el.find('div').clearQueue(); }); } }) }) })(jQuery) |
Сохраните его в файл с расширением .js, например, scripts.js и подключите к сайту перед тегом </head>
, не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="http://ПУТЬ_ДО_ФАЙЛА_НА_ВАШЕМ_САЙТЕ/scripts.js"></script> |
Далее нужно добавить в CSS-файл вашего сайта следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.jQtooltip { position: relative; cursor: help; border-bottom: 1px dotted; } .jQtooltip div { display: none; position: absolute; bottom: -1px; left: -1px; z-index: 1000; width: 190px; padding: 8px 12px; text-align: left; font-size: 12px; line-height: 16px; color: #000; box-shadow: 0 1px 3px #C4C4C4; border: 1px solid #DBB779; background: #FFF6BD; border-radius: 2px; } |
Теперь осталось поместить необходимый текст в тег <span>
с классом jQtooltip
и атрибутом title
, т.е. вот так:
1 |
<span class="jQtooltip" title="текст всплывающей подсказки">текст</span> |
Если вы желаете, чтобы вместо текста был квадратик, как в , тогда в CSS-файл нужно добавить еще такие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.jQtooltip.mini { display: inline-block; vertical-align: bottom; font-size: 11px; width: 14px; line-height: 13px; text-align: center; margin-left: 2px; top: -2px; color: #9A4D18; border: 1px solid #FAD28F; background: #FFF6BD; border-radius: 2px; } |
А html-код в этом случае будет таким:
1 |
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span> |
В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т.е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.
Вот, собственно, и все.
Ive never been able to do this, perhaps because of a constitutional incapacity for sustained work at something without http://writepaper4me.com at least the possibility that what im doing will be publishable