Установка:
Код скрипта выглядит следующим образом:
Code
(function($){
$(function() {
$('span.jQtooltip').each(function() {
var title = $(this).attr('title');
if (title && title != '') {
$(this).attr('title', '').append('<div>' + title + '</div>');
var width = $(this).find('div').width();
var height = $(this).find('div').height();
$(this).hover(
function() {
$(this).find('div')
.clearQueue()
.animate({width: width + 20, height: height + 20}, 200).show(200)
.animate({width: width, height: height}, 200);
},
function() {
$(this).find('div')
.animate({width: width + 20, height: height + 20}, 150)
.animate({width: 'hide', height: 'hide'}, 150);
}
)
}
})
})
})(jQuery)
Сохраните его в файл с расширением .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 {
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;
}
.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;
}
Теперь осталось поместить необходимый текст в тег <span> с классом jQtooltip и атрибутом title, т.е. вот так:
Code
<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>
Если вы желаете, чтобы вместо текста был квадратик, как на скриншоте, тогда используйте вот этот код:
Code
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>
В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т.е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.
Вот, собственно, и все.
