使用 jquery 检查鼠标是否悬停在元素上

Question

我一直在尝试制作我自己的工具提示，除了如果你快速移动鼠标并移出 div 工具提示仍在显示之外，它的效果很好。

这个问题是工具提示跟随光标，所以如果你没有在它预期的元素上，它会很烦人。

问题看起来是，如果您快速执行此操作，则它不会触发隐藏工具提示的 mouseleave 函数。

jQuery(document).ready(function($) {
  "use strict";

  function tooltipHover() {
    $('.table-pointer, .ajax-table-pointer').mouseover(function() {

      //const year = $(this).attr('data-y');
     // const month = $(this).attr('data-m');
      //const qid = $(this).attr('data-q');

      //var invoiceFormData = {
      //  'type': 2,
      //  'year': year,
      //  'month': month,
      //  'qid': qid
      //};

      //$.ajax({
       // type: 'POST',
       // url: '/Applications/Controllers/Tracker/ajax.php',
       // data: invoiceFormData,
       // dataType: 'html',
       // encode: true
    //  }).done(function(data) {
       // $('.ubltool').html(data).show();
     // });
     //commented this out because I can not call through this
     
     $('.ubltool').html('tsteadasd').show();
    }).mouseleave(function() {
      $('.ubltool').hide();
    });
  }

  $('.table tr td.table-pointer, .table tr td.ajax-table-pointer').on('mousemove', function(e) {

    var newX = e.pageX - 200;
    var newY = e.pageY + 30;
    $('.ubltool').css({
      left: newX,
      top: newY
    });
  });
  tooltipHover();
});

.table{width:80%;margin:200px 10%;}

.ubltool {
  position: fixed;
  width: auto;
  height: auto;
  border-radius: 3px;
  background-color: #f0f0f0;
  box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
  top: 49%;
  left: 48.85%;
  padding: 10px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
    </tr>
    <tr>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
      <td>Here</td>
    </tr>
    <tr>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
    </tr>
    <tr>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td >Here</td>
    </tr>
    <tr>
      <td>Here</td>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
    </tr>
    <tr>
      <td class="table-pointer">Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td>Here</td>
      <td class="table-pointer">Here</td>
    </tr>
  </tbody>
</table>

<div class="ubltool"></div>

Answer 1

我已经做过这样的事情，而且很容易。这是我的脚本看看

(function ($) {
    $.toolTipIni = function () {

        function build() {
            // Get all span, input, li that have title
            var items = $("span[title]:not([title='']):visible,a[title]:not([title='']):visible,div[title]:not([title='']):visible,input[title]:not([title='']):visible,li[title]:not([title='']):visible");
            $(items).each(function () {
                var o = $(this);
                var title = o.attr("title");
                if (title && title != "" && !o.is(":hidden")) {
                    var offset = this.getBoundingClientRect();
                    o.attr("title", "");
                    o.addClass("tooltips");
                    var toolSpan = $("<span class='toolSpan'>" + title + "</span>");
                    toolSpan.css({
                        top: (offset.top + offset.height) + 10,
                        left: offset.left + (offset.width / 2)
                    });

                    o.append(toolSpan);
                    toolSpan.hide();
                    var timeOut = undefined;
                    o.mouseover(function (e) {
                        var offset = o[0].getBoundingClientRect();
                        clearTimeout(timeOut);
                        timeOut = setTimeout(function () {
                            toolSpan.css({
                                left: e.clientX,
                                top: e.clientY + 10
                            });
                            toolSpan.show();
                        }, 800); // wait before showing ths tooltip
                    }).mouseout(function () {
                        clearTimeout(timeOut);
                        toolSpan.hide();
                    });

                }
            });

            setTimeout(build, 100);
        }
        build();
    }
}(jQuery));

$(document).ready(function(){
//  simple start the tooltip
// you could modify it to your need 
$.toolTipIni();
});

.tooltips {
    /*position: relative;*/
    /*display: inline;*/
}

    .tooltips > span.toolSpan {
        position: fixed;
        width: auto !important;
        color: #FFFFFF;
        background: #000000;
        height: auto !IMPORTANT;
        line-height: 30px;
        text-align: center;
        visibility: hidden;
        border-radius: 6px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px !important;
        font-weight: normal !important;
    }

        .tooltips > span.toolSpan:after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 16%;
            margin-left: -8px;
            width: 0;
            height: 0;
            border-bottom: 8px solid #000000;
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
        }

    .tooltips:hover.tooltips > span.toolSpan {
        visibility: visible;
        opacity: 0.8;
        top: 30px;
        left: 50%;
        /*margin-left: -76px;*/
        z-index: 999;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span title="this is a test">hover here</span>

Answer 2

我走了另一条路。

我并不是说这是答案或正确方法，但它确实有效。

但我会 post 在这里以供将来参考，以防其他人遇到类似问题。

我更改了以下代码：

$('.table tr td.table-pointer, .table tr td.ajax-table-pointer').on('mousemove', function(e) {

    var newX = e.pageX - 200;
    var newY = e.pageY + 30;
    $('.ubltool').css({
      left: newX,
      top: newY
    });
  });

至

$('body').on('mousemove', function(e){

        var newX = e.pageX - 200;
        var newY = e.pageY + 30;

        $('.ubltool').css({

            left:  newX,
            top:   newY

        });

        if(e.target.classList.contains('table-pointer')){

            $('.ubltool').show();

        } else {

            $('.ubltool').hide();

        }

    });

然后我基本上删除了 Mouseleave 函数并删除了 show();来自 $('.ubltool').html('tsteadasd').show();

这已经解决了我遇到的问题。

使用 jquery 检查鼠标是否悬停在元素上

Check if not mouse over an element using jquery

jquery

mouseleave

mousemove