Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Зафиксировать всплывающую подсказку на месте (https://javascript.ru/forum/dom-window/1562-zafiksirovat-vsplyvayushhuyu-podskazku-na-meste.html)

Nubi 14.08.2008 12:22

Зафиксировать всплывающую подсказку на месте
 
Как я первоначально задумывал:при подведении курсора к ссылке выскакивает всплывающая подсказка (содержание этой подсказки берется не из title ссылки, а то, которое я укажу).
Получилось примерно так
<div id="link" class="layer" style="display:none;">
<a href="http://ya.ru">Пам пам пам</a>
</div>
...
<a href="#" onmouseover="showtooltip();" onmouseout="hidetooltip();">ссылка</a>
...

function showtooltip() {
   document.getElementById("link").style.display="block";
   document.getElementById("link").style.top = event.y;
   document.getElementById("link").style.left = event.x;
   }
function hidetooltip() {
   document.getElementById("link").style.display="none";
   }


Внешний вид подсказки настраиваю через CSS c position:absolute
Возник вопрос:
Как дать возможность пользователю кликнуть во всплывшей подсказке, те чтобы когда курсор перемещается на подсказку сама подсказка не исчезала, но в любом другом случае - когда курсор покинул пределы ссылки и не защел на подсказку, она бы исчезла.

PS предполагаю, что на jQuery сделать вышеназванное проще, но пока надо разобраться с азами.

Андрей Параничев 14.08.2008 13:58

Вам нужно будет работать с функциями setTimeout/clearTimeout.
Алгоритм следующий:
- Когда пользователь наводит на ссылку (onmouseover), открывается "подсказка" и удаляется тайм-аут закрытия подсказки (если уже есть).
- Когда пользователь покидает ссылку (onmouseout), устанавливается тайм-аут на закрытие "подсказки".
- Когда пользователь наводит курсор на "подсказку" (onmouseover подсказки) тайм-аут на закрытие останавливается.
- Когда пользователь покидает "подсказку" (onmouseout подсказки) опять устанавливается тайм-аут на закрытие.
Если пользователь, покинув "подсказку" наведет курсор на ссылку - "подсказка" не закроется, так как тайм-аут будет остановлен ссылкой.

Таким образом получается, что пользователь может перемещаться между ссылкой и "подсказкой" без проблем, но покидая их обоих - подсказка закрывается.

Nubi 14.08.2008 14:50

Андрей Параничев,
гранд мерси, но блин, я не думал что все так сложно! (с позиции новичка, конечно).
конечно, попытаюсь написать, но если не выйдет буду долбить jQuery.

bibikl 08.03.2011 15:04

Где это есть еще
 
Да, вещь хорошая. Здесь это можно увидеть. Блеск!


Часовой пояс GMT +3, время: 08:58.