<script>
var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth)
{
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
theWidth=document.documentElement.clientWidth;
}
else if (document.body)
{
theWidth=document.body.clientWidth;
}
if (window.innerHeight)
{
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
theHeight=document.documentElement.clientHeight;
}
else if (document.body)
{
theHeight=document.body.clientHeight;
}
//Наведем на объект
function disShow(what,ev)
{
ev = ev || window.event;
//Наполняем содержанием подсказку
$(help).innerHTML = $(what).getAttribute("dis");
//Позиция появляющегося элемента
posX = ev.clientX;
posY = ev.clientY;
//украшаем размеры окна ШИРИНА
if(posX + 200 > theWidth)
$(help).style.right = 10 + 'px';
else
$(help).style.left = posX - 20 + 'px';
if(posX - 20 < 10)
$(help).style.left = 10 + 'px';
//Стилизуем всплывающий элемент
$(help).style.display = 'block';
$(help).style.top = posY +20 + 'px';
//Наполняем содержанием подсказку
$(help).innerHTML = $(what).getAttribute("dis");
//Выделяем первоначальный объект на котором лежит подсказка
$(what).style.border = '2px solid red';
}
//потеря побъектом курсора
function disHide(what)
{
//Прячим подсказку
$(help).style.display = 'none';
//Снимаем выделение первоначального объекта с подсказкой
$(what).style.border = '2px solid black';
$(help).style.removeProperty('left');
$(help).style.removeProperty('right');
$(help).style.removeProperty('top');
$(help).style.removeProperty('bottom');
}
function $( el )
{
return typeof el == 'string' ? document.getElementById(el) : el;
}
</script>
<style>
body {padding:0px;margin:0px;}
.item {width:100px;height:50px;background:green;border:2px solid black;padding:5px;}
#help {display:none;background:grey;border:2px solid black;width:200px;position:absolute;padding:2px;}
</style>
<body>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div class="item" dis="FullPlate Armor" id="div1" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item1</div>
<div style="position:absolute;right:0px;" class="item" dis="Fallen Sword" id="div2" onMouseMove="disShow(this,event);" onMouseOut="disHide(this);">item2</div>
<div id="help" ></div>
</body>
доработан. актуальный вопрос про исходники , образцы (
http://www.noinimod.ru/52/) - я так и не смог заставить работать =\