50 lines
1.3 KiB
HTML
50 lines
1.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 {
|
||
/* ваш стиль */
|
||
}
|
||
|
||
</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) {
|
||
/* ваш код */
|
||
}
|
||
|
||
new Tooltip({
|
||
elem: $('#link'),
|
||
html: "подсказка длиннее, чем элемент"
|
||
});
|
||
|
||
|
||
new Tooltip({
|
||
elem: $('#link2'),
|
||
html: "HTML<br>подсказка",
|
||
offset: 0
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|