Проверьте, не мышь ли над элементом, используя jquery - PullRequest
Новая
       38

Проверьте, не мышь ли над элементом, используя jquery

0 голосов
/ 11 июня 2019

Я пытался создать свою собственную всплывающую подсказку, которая отлично работает, за исключением того, что если вы быстро щелкаете мышью и выходите из 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>

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Я пошел другим путем.

Я не говорю, что это ответ или правильный путь, но он работает.

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

Я изменил следующий код: 

$('.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 и удалил шоу();из $ ('. ubltool'). html ('tsteadasd'). show ();

Это исправило проблему, с которой я столкнулся.

0 голосов
/ 11 июня 2019

Я уже сделал что-то подобное, и это легко.Вот мой сценарий, посмотрите 

(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>
...