Javascript-форум - Позиционирование всплывающей подсказки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Позиционирование всплывающей подсказки (https://javascript.ru/forum/dom-window/68254-pozicionirovanie-vsplyvayushhejj-podskazki.html)

Янковиц,
:) попытка номер три - если left = width - 250;
если заведомо известно что left меньше width то зачем это проверять if ( width > left )

Еще разочек. Сейчас соображу...

window.addEventListener('mouseover', function(e) {
	var cursorposX = e.pageX;
	var cursorposY = e.pageY;
	var margintop = cursorposY - 250;
	var marginleft = cursorposX - 250;
	if ( cursorposY < 250 ){
		document.getElementsByTagName('span')[0].style.top="30px";
	} else if ( cursorposY > margintop ) {
		document.getElementsByTagName('span')[0].style.bottom="30px";
	}
	if ( cursorposX < 250 ){
		document.getElementsByTagName('span')[0].style.left="125px";
	} else if ( cursorposX > marginleft ) {
		document.getElementsByTagName('span')[0].style.right="125px";
	}
}, false);

1. Определяем позицию курсора по оси игрек
Допустим у нас высота 1000 пикселей.
Если курсор находится по высоте менее 250 пикселей, тогда подсказке задаем стиль - top:30px Так выводим подсказку снизу.
Если курсор находится по высоте больше чем 1000 минус 250 пикселей (то есть более 750 пикселей), тогда выводим подсказку сверху тем, что задаем ей стиль bottom: 30px;
Если курсор по высоте где то посередине, то ничего не делаем, подсказка отлично вписывается в экран

Ааа, сообразил, мне нужно получить высоту экрана

Янковиц,
:-? ничего же не поменялось

тоже самое что

window.addEventListener('mouseover', function(e) {
	var cursorposX = e.pageX;
	var cursorposY = e.pageY;
		if ( cursorposY < 250 ){
		document.getElementsByTagName('span')[0].style.top="30px";
	} else {
		document.getElementsByTagName('span')[0].style.bottom="30px";
	}
	if ( cursorposX < 250 ){
		document.getElementsByTagName('span')[0].style.left="125px";
	} else  {
		document.getElementsByTagName('span')[0].style.right="125px";
	}
}, false);

как будет одновременно работать top и bottom(left и right) тоже ещё неизвестно ...

Разобьем задачу.
Второе условие поправил:
Если позиция курсора больше, чем высота экрана минус 250 пикселей, то добавляем стиль

<script>
window.addEventListener('mouseover', function(e) {
	var cursorposY = e.pageY;
	var height = document.body.clientHeight;
	var margintop = height - 250;
	if ( cursorposY < 250 ){
		document.getElementsByTagName('span')[0].style.top="30px";
	} else if ( cursorposY > margintop ) {
		document.getElementsByTagName('span')[0].style.bottom="30px";
	}
}, false);
</script>

Рони, подскажи. У меня скрипт срабатывает при входе курсора в окно:

window.addEventListener

Как прописать срабатывание на ссылку?

И второе. Стили добавляются для первой ссылки:

document.getElementsByTagName('span')[0].style.top="30px";

Я так понял это из-за нолика. А как сделать, чтобы на какую ссылку навел, в span этой ссылки и добавляется стиль?

Янковиц,

window.addEventListener('mouseover', function(e) {
  var el = e.target;
  if(!el.classList.contains("screentip")) return;
  el = el.querySelector("span");
  //...   el.style.top =
}, false);

Цитата:

Сообщение от Янковиц

Второе условие поправил:

потом вы вспомните про скролл и в результате код будет как в посте №2

Видите ли, во втором посте варианты хороши, но выводятся подсказки в блоке <div class='block'>gbgfgfb</div>
Это один блок на все ссылки. А у меня, блоки подсказки появляются внутри ссылки и на каждую - своя подсказка :(

Позиционирование всплывающей подсказки

Янковиц,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.screentip{
  position: relative; /* позиционируем */
  display: inline-block;
  background: #eaeaea;
  color: #232323;
  text-decoration: none;
  cursor: help;
  outline: none;
}
.screentip span{
  position: absolute; /* позиционируем */
  z-index: 999; /* выдвигаем на передний план */
  visibility: hidden; /* временно скрываем */
  left: -50px;
}
.screentip:hover{
  border: 0; /* используем если необходим IE6 fix */
  position:relative;
  z-index: 9999;
}
.screentip:hover span{
  visibility: visible; /* отображаем подсказку */
}
p{
  height: 1000px;
  width: 1000px;
}

</style>
 <script>
window.addEventListener('mouseover', function(e) {
  var el = e.target;
  if(!el.classList.contains("screentip")) return;
  var span = el.querySelector("span");
  var pos = el.getBoundingClientRect();
  var left = 12;
  var maxLeft =  pos.left + 12 + span.offsetWidth;
  var width = document.documentElement.clientWidth
  if(maxLeft > width) left = width - maxLeft;
  if(pos.left < 0) left = -pos.left + 6;
  var top = el.offsetHeight + 12;
  var maxTop = pos.top + span.offsetHeight + el.offsetHeight + 12;
  var height = document.documentElement.clientHeight
  if (maxTop > height) top = - span.offsetHeight - 6
  span.style.left = left +"px";
  span.style.top = top +"px";
}, false);
</script>
</head>

<body>
<p></p>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<a href="#" class="ret screentip">ссылка
<span id="texts">Подсказка</span>
</a>
<p></p>
</body>
</html>

Я так понимаю ты хочешь чтобы подсказка была по центру экрана, и если я правильно понял, то можно спокойно задать ей абсолютное положение
Блоку под подсказку задать

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

А самому блоку с подсказкой задать

position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;