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

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/06-widget-tasks/02-moving-tooltip/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"tooltip-moving-src","plunk":"2N1muMlIKBmADQIRbPoY"}

54
02-ui/05-widgets/06-widget-tasks/02-moving-tooltip/task/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>