javascript - 具有固定位置的弹出式光标跟随工具提示不允许我填写输入元素，并且在表格下方时跳转(JSFIDDLE)

Question

我正在尝试利用 this answer's工具提示代码，但我遇到了一些问题。工具提示不允许我在 <input> 中输入文本元素，并且当我向下滚动表格很远时也会跳转，如下所示:

虽然它应该跟随光标。我做了这个 fiddle :https://jsfiddle.net/nuvgef12/这是代码:

CSS:

.tooltip {
display: inline-block;
position: fixed;
padding: .5em 1em;
background-color: red;
}

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4 id="log">pageX: -, pageY: -</h4>
<div class="tooltip">I'm a tooltip!</div>

<input type="text" placeholder="Enter something">
<table class='items'>
            <thead>
            <tr class="table-header">
                <th>Id</th>
                <th>Icon</th>
                <th>Name</th>
            </tr>
            </thead>

            <tr>
              <td>1</td>
              <td>1</td>
              <td>1</td>
            </tr>

            <tr>
              <td>12</td>
              <td>12</td>
              <td>12</td>
            </tr>
            ...

js:

$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  $( ".tooltip" ).css({
    "left" : event.pageX,
    "top" : event.pageY
  });
});

编辑:

给出的解决方案有助于将文本放入输入中，但仍然存在跳转问题。它发生在向下滚动表格后 - 工具提示短暂消失，然后重新出现在下方和侧面。

Answer 1

将 1 添加到 X 和 Y 位置，以允许您在其后面进行选择，或添加一个margin-top:1px 到您的 .tooltip 也可以使用。

解决滚动问题的一个简单方法是使用 clientX 和 clientY。

这是修改后的脚本:

$(window).on( "mousemove", function( event ) {
  $( "#log" ).text( "clientX: " + event.clientX + ", clientY: " + event.clientY );
  $( ".tooltip" ).css({
    "left" : event.clientX + 1,
    "top" : event.clientY + 1
  });  
});

Here is the working code.

您可以阅读更多 here 它们之间的区别，但基本上 pageX 是相对于文档在视口(viewport)中的位置，该位置在滚动时发生变化，并且clientX 是相对于视口(viewport)本身的，不会以这种方式改变。