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

[Янковиц]

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

<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;


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

[Янковиц]

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