Переместите пользовательскую подсказку jQuery с помощью мыши

Question

Переместите пользовательскую подсказку jQuery с помощью мыши

0

Я создал пользовательскую подсказку jQuery, и я хочу, чтобы она перемещалась с помощью мыши.
Вот мой код script.js:

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        });
});

Mirza Muneeb 30 апр. 2014, в 13:45

Источник

0

Можете ли вы описать точную проблему, с которой вы столкнулись?
display-name-is-missing 30 апр. 2014, в 11:26
0

Каков твой вопрос???
Bhojendra Rauniyar 30 апр. 2014, в 11:26
0

Я хочу, чтобы подсказка двигалась мышью.
Mirza Muneeb 30 апр. 2014, в 11:28
0

Он движется сейчас с мышью?
user3588057 01 май 2014, в 06:56
0

Да, это движется .......
Mirza Muneeb 01 май 2014, в 06:57
0

спасибо за Ваш ответ.
Mirza Muneeb 01 май 2014, в 06:57
0

Хорошо..................
user3588057 01 май 2014, в 06:58
0

Не забудьте сделать ответ полезным.
user3588057 01 май 2014, в 06:59
0

Хорошо..................
Mirza Muneeb 01 май 2014, в 07:00
0

Вы также не забудьте сделать вопрос полезным.
Mirza Muneeb 01 май 2014, в 07:01

Показать ещё 8 комментариев

Теги:

javascript

jquery

2 ответа

0

Вот простой трюк. Просто измените.appendTo('body') на.appendTo($ (this)) и примените абсолютную позицию к вашему классу tooltip. Я сделал это с помощью встроенного css для вас в следующем коде.

<script>
$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip" style="position:absolute; padding:5px; margin:0px; background-color:#ff00ff"></p>')
                .text(title)
                .appendTo($(this))
                .fadeIn('slow');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        });
});</script>

Anup_Tripathi 30 апр. 2014, в 09:44

Ещё вопросы

Можете ли вы описать точную проблему, с которой вы столкнулись?
Я хочу, чтобы подсказка двигалась мышью.
Не забудьте сделать ответ полезным.
Вы также не забудьте сделать вопрос полезным.

user3588057 · Accepted Answer · 2014-04-30T08-28-00.000Z

попробуй это:

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
        });
});