Если хотите как-то сделать сайт отличным от других, то замените обычные всплывающие подсказки на эти, более яркие и красивые подсказки. При наведении на текст, подсказка появляется плавно. Есть два варианта: 1) Подсказка появляется от вашего текста, 2) Подсказка появляется от восклицательного знака, заключённого в квадратик.
На все страницы сайта, где будет работать данная подсказка перед тэгом [ss]/head[/ss] ставим:
Код
<script type="text/javascript">
$('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();
});
}
}) </script>
Затем в CSS вашего сайта ставим:
Код
.jQtooltip {position:relative;cursor:help;border-bottom:1px dotted;}
.jQtooltip div {display;none;position: absolute;bottombottom:-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 class="jQtooltip" title="текст всплывающей подсказки">Текст</span>
Если хотите второй вариант, когда подсказка всплывает от ! знака в квадратике, то используем следующий код:
Код
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>