jQuery tooltip - следуйте за мышью - PullRequest
Новая
       19

jQuery tooltip - следуйте за мышью

1 голос
/ 15 января 2012

Я работаю, но с кодом, который должен добавить «всплывающую подсказку», которая следует за мышью, когда вы наводите курсор мыши на элемент div.(он должен делать это с 3 наборами по 8 делителей)

Содержимое всплывающей подсказки помещается в промежуток, который, в свою очередь, находится внутри 'li', к которому прикреплены .hover и .mousemove.

«Живой пример» того, чего я пытаюсь достичь, можно увидеть здесь.(все еще в разработке, всплывающая подсказка должна отображаться при наведении на красные полосы).

http://staging2.e2e.be/ciber4/15-werfzones--de-werven-op-een-rij/zoek-op-planning

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

Также сделана скрипка с соответствующим кодом.

http://jsfiddle.net/JDST8/

Ответы [ 2 ]

2 голосов
/ 15 января 2012

Вы можете использовать $(selector).position(), чтобы получить координаты X / Y бара.Он возвращает объект с клавишами «top» и «left», содержащий полное смещение страницы элемента.

Вот скрипка с рабочим примером: http://jsfiddle.net/xJSMu/

PS: Вы получили свои x иy смещает неверно в своей скрипке - в любом случае по именам.

PPS: я также добавил кеширование некоторых селекторов (Правило: если вы используете его более одного раза, кешируйте его вместо вызова jQueryснова конструктор).

1 голос
/ 05 апреля 2015

HTML 

<div id="tooltipWindow" class="tooltipContainer">
    <div></div>
</div>

CSS (Добавьте стили, как вы хотите, в приведенном ниже скрипте я также добавил класс прикрепленного элемента к div-подсказке) 

<style>
    .tooltipContainer {
        position: fixed;
        height: auto;
        width: auto;
        background: ghostwhite;
        padding: 10px;
    }
</style>

JAVASCRIPT (jQuery, не забудьте включить библиотеку jQuery, я также добавил тег include) 

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script>
    //Following Tooltip
    $('.elementClassName').mousemove(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    });
    $('.elementClassName').mouseleave(function (e) {
        $('#tooltipWindow').hide();
        });
    }

    //Non Following Tooltip
    $('.elementClassName').hover(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    },function (e) {
        $('#tooltipWindow').hide();
        });
    }

</script>
...