如果工具提示未悬停 class，如何检查 mouseout

Question

我正在尝试在具有普通 .net 控件以及具有用户控件的 Telerik radgrid 的 aspx 页面上显示工具提示。

我想做什么：

当用户将鼠标悬停在 table 单元格 (td) 上时，我会附加一个带有图像的 div 元素。当用户鼠标输入图像时，我会显示一个工具提示。我的 mouseout 有问题，需要能够检查用户是否在图像上，如果是这样我不想删除工具提示信息 class 否则我确实需要删除它。

问题是什么：

如果我将鼠标向左移动到 mouseenter 图像，它就会消失并使用户无法显示工具提示。

这是我的 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

这是一个fiddle：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();
});

如果您需要更多帮助，请直接询问。

如果工具提示未悬停 class，如何检查 mouseout

How to check in mouseout if class is not hovered for tooltip

.net

jquery

radgrid