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

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

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

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

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

Добрый день. Есть всплывающая подсказка вида:

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

И стили

<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: 50%;
	bottom: 30px;
	top: 30px;
	margin-left: -127px;
}
.screentip:hover{
	border: 0; /* используем если необходим IE6 fix */
	position:relative;
	z-index: 9999;
}
.screentip:hover span{
	visibility: visible; /* отображаем подсказку */
}
</style>

Как при помощи js сделать, чтобы подсказка не выходила за поля браузера, то есть в зависимости от расположения на экране, подсказка меняет значение margin-left и top.
Спасибо

Здорово, вот бы еще, чтобы ссылка была вида site.ru

Цитата:

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

чтобы ссылка была вида site.ru

вы о чём?

В общем, решил попробовать свой скрипт. Подскажите, уважаемые js знатоки, с точки зрения адекватности, нормально ли такой скрипт?

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

Осталось сделать срабатывание на наведение ссылки (ссылок может быть несколько и добавление стилей нужно сделать только к тем span, которые в активном теге a). Подскажете как сделать?

Янковиц,
зачем нужны строки 5 и 6, а также условия на их основе в строках 9 и 14?

Если позиция курсора в html поле по оси "y" менее 250 пикселей, то располагаем блок span под ссылкой, если более 250px, то над ссылкой. Идет проверка по осям икс и игрек.

Янковиц,
:-?
попробую ещё раз обьяснить

else if ( height > top )
else if ( width > left ) отмеченное красным ненужная проверка и строки ниже ненужны

var top = height - 250;
var left = width - 250;

возможно вы хотели что-то иное

Я имею в виду, что если ссылка с подсказкой находится к примеру в левом верхнем углу, то подсказку смещаем на определенное количество пикселей вправо и вниз. И так по всем сторонам.

Янковиц,
:) попытка номер три - если 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;

Цитата:

Сообщение от рони (Сообщение 449538)

serj0110,
:-?

Уже заметил, у меня примерная такая реализация, сейчас пытаюсь повторить, не канает