Использование jQuery для подсказок - PullRequest
Новая
       4

Использование jQuery для подсказок

0 голосов
/ 22 сентября 2011

У меня есть div с формой внутри.Форма небольшая, состоит из одного или двух выпадающих / текстовых полей.Мне интересно, что потребуется для следующего:

  • , когда я нажимаю на ссылку, появляется всплывающая подсказка с формой в ней.Он появляется поверх ссылки, по которой я щелкнул, поэтому, когда кажется, что мышь находится над ней.
  • , когда мышь выходит за границы подсказки, она исчезает.

При поиске, все примеры всплывающих подсказок, которые я обнаружил, появляются при наведении на указанную область.Все примеры всплывающих окон jQuery, которые я видел, являются модальными и вынуждают пользователя явно закрывать его.

Кто-нибудь знает, как я могу заставить всплывающую подсказку работать, как описано выше?

Ответы [ 4 ]

2 голосов
/ 22 сентября 2011

Если вы не можете найти работающий плагин, то, что вы описали, довольно просто реализовать.

Вам просто нужно привязать событие mousemove к документу и проверить, является ли его цель или ее родители вашей подсказкой.

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

$("#trigger").hover(function () {
    // move the tool tip div into place
    // show the tool tip
}, function () {    
    $(document).bind('mousemove.tooltip', function (e)
    {
        if (e.target.id !== 'tooltip' && $(e.target).parents('#tooltip').length === 0)
        {
            // close tooltip
            $("#tooltip").hide();
            $(document).unbind('mousemove.tooltip');
        }
    });
});

Вот элементарная скрипка, которая работает как описано:

http://jsfiddle.net/5h3Zy/5/

0 голосов
/ 11 февраля 2012 
<script type="text/javascript">
$(document).ready(function () {
    $('#mylink').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
    $('#mytooltip').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
})
</script>
<div id="mylink">My Link</div>
<div id="mytooltip'">My Form</div>

Это помещает событие "hover" на каждый элемент.Каждый раз, когда ваша мышь находится над любым элементом, она вызывает «stop (true, true)», что предотвращает появление fadeOut.Как только мышь покидает элементы, всплывающая подсказка исчезает.

0 голосов
/ 22 сентября 2011

Ну, я создал что-то, что, я думаю, было то, что вы, после того, как посмотрите

http://jsfiddle.net/hDcac/1/

Код стал немного грязным, но вы должны понять.:)

0 голосов
/ 22 сентября 2011

Если вы хотите использовать плагин jquery UI , используйте диалоговое окно и функцию, такую ​​как:

...