54 lines
1.6 KiB
HTML
54 lines
1.6 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>
|
||
|
||
<a href="#" id="link">Ссылка с подсказкой</a>
|
||
<a href="#" id="link2">Еще ссылка</a>
|
||
|
||
<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
|
||
<em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
|
||
</div>
|
||
|
||
<script>
|
||
// должно работать даже если страница имеет прокрутку
|
||
// подсказка должна перекрывать текст под ней
|
||
// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
|
||
function Tooltip(options) {
|
||
/* ваш код */
|
||
}
|
||
|
||
new Tooltip({
|
||
elem: $('#elem'),
|
||
html: "Вот <b>такая</b> подсказка!"
|
||
});
|
||
|
||
new Tooltip({
|
||
elem: $('#link'),
|
||
html: $('#link').html()
|
||
});
|
||
|
||
new Tooltip({
|
||
elem: $('#link2'),
|
||
html: $('#link2').html()
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|