Jquery Hover Out - Добавление всплывающей подсказки? - PullRequest
Новая
       24

Jquery Hover Out - Добавление всплывающей подсказки?

0 голосов
/ 22 мая 2019

Я пытаюсь обновить свой код jquery для всплывающей подсказки, чтобы, когда пользователь перемещает мышь от значка всплывающей подсказки, всплывающая подсказка задерживалась при копировании текста. Я попытался добавить этот тайм-аут, который работает при первом нажатии значка, но при повторном нажатии значка подсказка отображается пустым. Если я удаляю код тайм-аута, он работает.

Всплывающая подсказка работает при первом нажатии:

Tooltip Working Example

При втором щелчке всплывающая подсказка выглядит пустой:

Tooltip Not Working

Код: 

<script type="text/javascript">$(document).ready(function () {
var hoverTimeout;
// Tooltip only Text
$('.masterTooltip').hover(function () {
    // Hover over code
    clearTimeout(hoverTimeout);
    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
    hoverTimeout = setTimeout(function () {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }, 5000);
}).click(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
});
});</script>

1 Ответ

1 голос
/ 23 мая 2019

Ваша проблема: $(this) в вашей первой функции относится к Object [ div.masterTooltip ] (я тестировал с одним div, потому что вы не включили HTML в ваш вопрос), но $(this) во второй функции относится к Object [ Window ].Это приводит к тому, что data('tipText') не определено во второй функции, поэтому атрибут title не вставляется, что дает пустую подсказку после первого выполнения функции.

Этот код должен работать: 

$(document).ready(function () {
var hoverTimeout;
// Tooltip only Text
var masterTooltip = $('.masterTooltip').hover(function () {
    // Hover over code
    clearTimeout(hoverTimeout);
    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
    hoverTimeout = setTimeout(function () {
        $(masterTooltip).attr('title', $(masterTooltip).data('tipText'));
        $('.tooltip').remove();
    }, 5000);
}).click(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
});
});
...