javascript - 具有固定位置的弹出光标跟随工具提示不允许我填写输入元素并在远离表格时跳转（JSFIDDLE）

Question

我正在尝试使用此答案的工具提示代码，但遇到了一些问题。工具提示不允许我在<input>元素中输入文本，并且当我向下滚动表格时也会跳转，如下所示：

虽然它应该跟随光标。我做了这个小提琴：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
  });
});

编辑：

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

标签： javascriptjqueryhtmlcss

Answer 1

如果您在工具提示中添加一点边距，它将让您的指针单击输入而不是工具提示

.tooltip {
  display: inline-block;
  position: fixed;
  margin: 1px;
  background-color: red;
}