Реализация всплывающей подсказки

[shurik_shink]

В интернете полно ресурсов как реализовать с помощью css, но все они статические. С этим проблем не возникло. Кому интересно неплохой demo с исходником http://ruseller.com/lessons.php?rub=2&id=664.

1. Подскажите, как создать всплывающую подсказку так чтобы окно с подсказкой для элемента на странице прорисовывалось относительно курсора мыши.
2. Можно ли обойтись без javascript, а только лишь средствами html и css.

Для примера, как реализовано на сайте(просто для примера): http://саженцы-виногра...0%D0%B0%D0%B4/
Если навести курсор на фото винограда появится описание в рамке которое перепрорисовывается при перемещении мыши.
К сожалению если скопировать код и сохранить в локальную страницу, то всплывающая подсказка не работает, видимо не подтягивается какой-то ресурс. Потому понять как там сделано до конца не получается.

[EmperioAf]

2. Можно ли обойтись без javascript, а только лишь средствами html и css.

нет

[Deff]

нет

Ну по идее, на каждом элементе мон прорисовать свой курсор мыши, с нужной подсказкой...
Он будет двигаться в пределах элемента

[ruslan_mart]

Deff, ага, жесть конечно. Но зато без JS.

Только все равно нужно будет писать скрипт, который с атрибута будет брать текст и преобразовывать его в картинку, после чего подставлять как url (base64) в cursor.

[Deff]

Ruslan_xDD,
Гм - ну а чисто скриншот подсказки прописать в css - ?
Если элементов немного - не критично
=============
//Есть и canvas преобразование текста или html в картинку html2canvas.js

[Sizz Lorr]

CSS через :after может делать всплывающую подсказку на блоке, ройте в направлении :hover:after ... там все очень просто ...

[shurik_shink]

Частично решил проблему

Для задания координат подсказки для элементов div на все div с name="div2" навешивается Listener который вызывает функцию mousemove_xy в которой собственно и задаются координаты бокса с текстом подсказки.

Но в моем случае, для того чтобы получить handle всплывающей подсказки я испольую его id. И пока у меня только один элемент div и один <span id="span2"> на странице.

<div id="div2" name="div2" class="div1 photo">
<img src="saperavi-severnyj-250x383.jpg" class="img1"/>
<span id="span2">Сорт винограда 'Саперави северный'</span>
</div>

<script>
var divs=document.getElementsByName("div2");
for (i=0; i<divs.length; i++){
	divs[i].addEventListener("mousemove", mousemove_xy);
}
 
function mousemove_xy(event){
var item2 = document.getElementById("span2");		
item2.style.left=event.offsetX+10;
item2.style.top=event.offsetY+10;
}
</script>

Как определить для какого div выполняется функция - что бы потом определить просто дочерний span, а не искать его по id?

Полагаю нужно использовать оператор this, но как не понятно

Напрямую span = this.getElementById("span2"); не работает

[Sizz Lorr]

function hide(e) 
{
  e.target.style.visibility = 'hidden';
}
list.addEventListener('click', hide, false);

e.target - вот сюда )))
Через CSS делать не стал?