109 lines
3 KiB
HTML
109 lines
3 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||
<style>
|
||
body {
|
||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||
}
|
||
|
||
.tooltip {
|
||
position:absolute;
|
||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||
padding: 10px 20px;
|
||
|
||
/* красивости... */
|
||
border: 1px solid #b3c9ce;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font: italic 14px/1.3 arial, sans-serif;
|
||
color: #333;
|
||
background: #fff;
|
||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||
|
||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||
<a href="#" id="link2">Еще ссылка</a>
|
||
|
||
<script>
|
||
// должно работать даже если страница имеет прокрутку
|
||
// подсказка должна перекрывать текст под ней
|
||
// подсказка не должна вылезать за экран
|
||
function Tooltip(options) {
|
||
|
||
var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
|
||
var tooltipElem;
|
||
var isEnabled = true;
|
||
|
||
var elem = options.elem;
|
||
var html = options.html;
|
||
|
||
// обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
|
||
elem.hover(show, hide);
|
||
|
||
function hide() {
|
||
getTooltipElem().remove();
|
||
}
|
||
|
||
function show() {
|
||
var elemCoords = elem.offset();
|
||
|
||
var tooltipElem = getTooltipElem();
|
||
|
||
var winLeft = $(window).scrollLeft();
|
||
var winTop = $(window).scrollTop();
|
||
|
||
tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
|
||
|
||
var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth())/2^0;
|
||
if (left < winLeft) left = winLeft; // вылезли за левую границу
|
||
|
||
var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
|
||
if (top < winTop) { // вылезли за верхнюю границу
|
||
top = elemCoords.top + elem.outerHeight() + offsetFromElement;
|
||
}
|
||
|
||
tooltipElem.css({
|
||
left: left,
|
||
top: top
|
||
});
|
||
}
|
||
|
||
function getTooltipElem() {
|
||
if (!tooltipElem) {
|
||
tooltipElem = $('<div/>', {
|
||
"class" : 'tooltip',
|
||
html: html
|
||
});
|
||
}
|
||
return tooltipElem;
|
||
}
|
||
|
||
}
|
||
|
||
new Tooltip({
|
||
elem: $('#link'),
|
||
html: "подсказка длиннее, чем элемент"
|
||
});
|
||
|
||
|
||
new Tooltip({
|
||
elem: $('#link2'),
|
||
html: "HTML<br>подсказка",
|
||
offset: 0
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|