HTML-Tooltip相对于鼠标指针的位置
如何按照自然风格对齐工具提示：鼠标指针的右下角？
<!DOCTYPE html>
<html>
<head>
<title>Tooltip with Image</title>
<meta charset="UTF-8">
<style type="text/css">
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip span img {
float:left;
}
.tooltip:hover span {
display:block;
position:absolute;
overflow:hidden;
}
</style>
</head>
<body>
<a class="tooltip" href="http://www.google.com/">
Google
<span>
<img alt="" src="http://www.google.com/images/srpr/logo4w.png">
</span>
</a>
</body>
</html>
问题答案：
对于默认的工具提示行为，只需添加title属性。但是它不能包含图像。
<div title="regular tooltip">Hover me</div>
在您弄清楚我是用纯JavaScript完成此问题之前，希望您发现它有用。图像将弹出并跟随鼠标。
JavaScript
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
CSS
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
扩展多个元素
多个元素的一种解决方案是更新所有工具提示span，并在鼠标移动时将其设置在光标下方。
var tooltips = document.querySelectorAll('.tooltip span');
window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
y = (e.clientY + 20) + 'px';
for (var i = 0; i < tooltips.length; i++) {
tooltips[i].style.top = y;
tooltips[i].style.left = x;
}
};
-
有什么想法吗？提前谢了。
-
问题内容： 我想使用画布制作一个绘画应用程序。所以我需要找到鼠标在画布上的位置。 问题答案： 对于使用JQuery的人： 有时，当您拥有嵌套元素时，其中一个元素会附加事件，这可能会使您难以理解浏览器将其视为父级。在这里，您可以指定哪个父级。 您采用鼠标位置，然后从父元素的偏移位置中减去它。 如果要在滚动窗格内的页面上获取鼠标位置： 或相对于页面的位置： 请注意以下性能优化： 这样，JQuery不必
-
问题内容： 我正在构建HTML5游戏，并且尝试将鼠标指针放在特定事件上的某个控件上，以便在特定方向上移动始终具有相同的结果。这可能吗？ 问题答案： 因此，我知道这是一个古老的话题，但是我首先要说这是不可能的。当前最接近的事情是将鼠标锁定在单个位置，并跟踪其x和y的变化。这个概念已经被Chrome和Firefox所采用。它由所谓的 Mouse Lock进行管理 ，点击逃逸将破坏它。通过我的 简要 阅
-
我必须将鼠标光标（指针）移动到一个特定的元素，然后点击该元素。我已经写了下面的代码，但它没有帮助。虽然我可以看到光标类型（图像）正在改变，但它并没有改变它的位置。 请帮忙。下面是我的代码：
-
问题内容： 我需要在滚动窗格上相对于鼠标位置放大/缩小。 我目前通过将内容包装在一个组中并缩放组本身来实现缩放功能。我用自定义枢轴创建一个新的Scale对象。（枢轴设置为鼠标位置） 这在Group的初始比例为1.0的情况下非常适用，但是之后的缩放比例无法沿正确的方向缩放-我相信这是因为Group缩放后相对鼠标位置会发生变化。 我的代码： 如何在不同的缩放级别上获得正确的鼠标位置？有没有一种更简单的
-
有趣的地方就在这里。我根据我在StreamReader中打开的文件迭代列表。 看起来像是： 现在是这样的：如果鼠标指针放在下拉框上，在执行时，item.text返回值，测试成功。如果指针在其他任何地方，item.text将为空，测试失败。为了理解发生了什么，并从这样一个事实中获得线索，即尽管测试在运行时会失败，但在执行时会成功，我用一个循环修改了代码： getAttribute（“value”）也