Как проверить мышеловку, если класс не находится в подсказке

Question

Я пытаюсь отобразить всплывающую подсказку на странице aspx, которая имеет нормальные элементы управления.net, а также Teleg Radgrid с пользовательским контролем.

Что я пытаюсь сделать:

Когда пользователь наводит курсор мыши на ячейку таблицы (td), я добавляю элемент div с изображением. Когда пользователь вводит изображение мышью, я отображаю всплывающую подсказку. У меня возникла проблема с указателем мыши, и я должен быть в состоянии проверить, есть ли пользователь на изображении, если я не хочу удалять класс tooltipinfo, иначе мне нужно удалить его.

В чем проблема:

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

Вот мой код jquery:

$('#page_content td', this).mouseover(function (e) {

    var nextTD = $(e.target).next('td');
    var controlID = nextTD.find("[id*=UI]").attr('id');
    var controlelement = document.getElementById(controlID);

    if (controlelement != null || controlelement != undefined) {

        console.log(controlID);

        var addToolTip = true;
        var $cell = $(e.target),
            $next = $cell.next(),
            $prev = $cell.prev();

        if ($cell.closest('div').is('[class*="RadGrid"]')) {
            addToolTip = false;
        }
        else if ($cell.closest('div').is('[class*="RadComboBox"]')) {
            addToolTip = false;
        }

        if (!$cell.children().length && addToolTip) {
            $cell.prepend($("<div class='tooltipinfo'><img id='" + controlID + "' src='/images/tooltip/infotooltip.png' /></div>"));
        }

        $(".tooltipinfo").on({

            mouseenter: function (e) {

                delay = setTimeout(function () {

                    var imgTargetID = "targetID_" + controlID;

                    if (controlID != undefined) {
                        if (controlelement != null) {
                            showToolTip(controlelement, imgTargetID);
                        }
                    }
                }, 1000);
            },

            mouseleave: function () {

                clearTimeout(delay);
                var $removeImg = $('.tooltipinfo');

                if ($removeImg.length) {
                    console.log('leaving image');
                    $(".tooltipinfo").remove();
                }

            }

        }, function () {
            //var $removeImg = $('#div2');

            //if ($removeImg.length && $(".tooltipinfo").length) {
            //    $("#div2").remove();
            //}
        });

    }

}).mouseout(function (e) {

    if ($(e.currentTarget).find('.tooltipinfo').not(':hover')) { // problem here
        $(this).css({ "background-color": "red" });
        console.log('removing');
        $(".tooltipinfo").remove();
    }

});

Любая помощь будет принята с благодарностью.

Вот окончательный код результата, который работает. Надеюсь, это поможет кому-то еще. Спасибо BeardSlapper за всю вашу помощь.

$('#page_content tr').on('mouseenter', 'td:not(:empty)', function (e) {

    if ($(this).find('img').length == 0) {

        var nextTD = $(e.target).next('td');
        var controlID = nextTD.find("[id*=UI]").attr('id');
        var controlelement = document.getElementById(controlID);

        if (controlelement != null || controlelement != undefined) {

            //console.log(controlID);

            var addToolTip = true;
            var $cell = $(e.target),
                $next = $cell.next(),
                $prev = $cell.prev();

            if ($cell.closest('div').is('[class*="RadGrid"]')) {
                addToolTip = false;
            }
            else if ($cell.closest('div').is('[class*="RadComboBox"]')) {
                addToolTip = false;
            }

            if (!$cell.children().length && addToolTip) {
                $cell.prepend($("<div class='tooltipinfo'><img id='" + controlID + "' src='/images/tooltip/infotooltip.png' /></div>"));
            }
        }
    }


    $('.tooltipinfo').on('mouseenter', function () {

        delay = setTimeout(function () {

            var imgTargetID = "targetID_" + controlID;

            if (controlID != undefined) {
                if (controlelement != null) {
                    showToolTip(controlelement, imgTargetID);
                }
            }
        }, 1000);

    });

    $('.tooltipinfo').on('mouseleave', function () {

        clearTimeout(delay);
        $(".tooltipinfo").remove();

    });


}).on('mouseleave', 'td', function (e) {

        $(".tooltipinfo").remove();
});

Answer 1

Вот скрипка: https://jsfiddle.net/1px2khws/1/

Вот упрощенная версия, которая должна делать то, что вы хотите.

$('#page_content td').mouseover(function(e) {
    if ($(this).find('img').length == 0) {
        $(this).append('<div class="tooltipinfo"><img src="http://i43.tinypic.com/ev6xix.jpg" width="200"></div>');
  }

  $('.tooltipinfo').on('mouseenter', function() {
    //Show Tooltip
    console.log('Show')
  });

  $('.tooltipinfo').on('mouseleave', function() {
    //Remove tooltip
    console.log('Remove');
  });
});

$('#page_content td').mouseleave(function(e) {
    $(this).find('img').remove();
});

Если вам нужна дополнительная помощь, просто спросите.