Плагины jQuery
1) Откройте HTML-код страницы. После тега <body> вставьте следующее:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
$(this).find('.tip').show(); //Show tooltip
}, function() {
$(this).find('.tip').hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
var tipHeight = $(this).find('.tip').height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
$(this).find('.tip').css({ top: mousey, left: mousex });
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
$(this).find('.tip').css({ top: mousey, left: mousex });
} else {
$(this).find('.tip').css({ top: mousey, left: mousex });
}
});
});
</script>
2) В ваш CSS-файл добавьте следующий код:
.tip {
padding: 10px; /* расстояние текста от края окна */
color: #FFFFFF; /* цвет шрифта */
background-color: #1D1D1D; /* фоновый цвет окна */
display: none;
position: absolute;
z-index: 1000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
3) Последний шаг — включение подсказок в ваш текст. Вновь откройте HTML-код и добавьте следующее:
<a href="http://" class="tip_trigger">Ваша Ссылка <span class="tip">Всплывающее окно с подсказкой</span></a>Между тегами <span> будет находится ваша подсказка: текст или изображение.