jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

update

Browse source
This commit is contained in:
Ilya Kantor 2014-11-16 01:40:20 +03:00
parent 962caebbb7
commit 87bf53d076
1825 changed files with 94929 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
2-ui/5-widgets/6-widget-tasks/2-moving-tooltip/source.view/index.html Executable file
View file

@ -0,0 +1,54 @@
<!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>