我正在尝试利用 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
});
});
编辑:
给出的解决方案有助于将文本放入输入中,但仍然存在跳转问题。它发生在向下滚动表格后 - 工具提示短暂消失,然后重新出现在下方和侧面。
最佳答案
将 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 它们之间的区别,但基本上 pageX 是相对于文档在视口(viewport)中的位置,该位置在滚动时发生变化,并且clientX 是相对于视口(viewport)本身的,不会以这种方式改变。
关于javascript - 具有固定位置的弹出式光标跟随工具提示不允许我填写输入元素,并且在表格下方时跳转(JSFIDDLE),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59603148/