Question

我不确定要如何更好地表达上面的标题，因此，如果您能想到一个更清晰简洁的标题，请随时重新措辞。

我正在使用HTML，CSS和Javascript（没有jQuery，Angular等）创建通用的工具提示。我已经将所有内容看上去都干净了，直到调整窗口大小并向下滚动为止。现在，根据我的理解，移动设备没有onmouseover或onmouseout事件，因此，我无需考虑这一点。但是，如果考虑到某些笔记本电脑的较小屏幕（我看过10英寸的屏幕），那么这可能是个问题。

当我将鼠标悬停在一个元素上（在此示例中，它们都是a元素）时，工具提示会按原样显示，但是当我如上所述调整大小时，onmouseout之所以触发事件，是因为鼠标在技术上位于工具提示上方，而不是元素上方。我以为从元素的位置偏移它的高度再加上五个像素，对于该问题我认为是安全的，但是似乎该位置不是我期望的位置。

我当前正在使用getBoundingClientRect()来计算位置，但是我相信这是基于视口的位置，而我认为我需要的是基于页面中的位置，而不是像页面移动那样工具提示在哪里。我已经在下面包含了我的代码，您可以对其进行测试，看看我在说什么。

var tooltip = document.getElementById("globalTooltip");
function showTooltip(sender) {
	var senderBounds = sender.getBoundingClientRect();
	var top = senderBounds.y + senderBounds.height + 5;
	tooltip.dataset.owner = sender;
	
	tooltip.innerHTML = sender.dataset.tooltip;
	tooltip.classList.add(sender.dataset.tooltiptype);
	
	if (top + tooltip.getBoundingClientRect().height + 5 > window.innerHeight)
		top = senderBounds.y - tooltip.getBoundingClientRect().height - 5;
	
	tooltip.style.top = top + "px";
	tooltip.style.left = (senderBounds.x + 5) + "px";
	tooltip.classList.add("active-tooltip");
}
function hideTooltip(sender) {
	tooltip.style.left = "-250px";
	tooltip.classList.remove("error");
	tooltip.classList.remove("warning");
	tooltip.classList.remove("success");
	tooltip.classList.remove("neutral");
	tooltip.classList.remove("active-tooltip");
}

body {
	margin: 0;
	text-align: center;
}
.disabled-link {
	color: #777;
	cursor: default;
}
li {
	padding: 5px;
	list-style-type: none;
}
.tooltip {
	position: absolute;
	padding: 10px;
	cursor: default;
	border-radius: 25px;
	color: #333;
	opacity: 0;
	transition: all 0.2s ease-in-out;
	max-width: 30vw;
}
.neutral { background-color: #ddd; }
.success { background-color: #7c7; }
.warning { background-color: #fc3; }
.error   { background-color: #f55; }
.active-tooltip { opacity: 1; }

<div class="container">
	<ul>
		<li>
			<a class="disabled-link"
				 data-tooltip="This link is available in another location."
				 data-tooltiptype="warning"
				 onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
				 Hover Over This Disabled Link</a>
		</li>
		<li><a href="#">Some Active Link</a></li>
		<li>
			<a class="disabled-link"
				 data-tooltip="Something great is coming soon!"
				 data-tooltiptype="success"
				 onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
				 Hover for more details...</a>
		</li>
		<li><a href="#">Some Active Link</a></li>
		<li>
			<a class="disabled-link"
				 data-tooltip="This area is currently under maintenance."
				 data-tooltiptype="error"
				 onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
				 Another Disabled Link</a>
		</li>
		<li><a href="#">Some Active Link</a></li>
		<li><a href="#">Some Active Link</a></li>
		<li><a href="#">Some Active Link</a></li>
		<li>
			<a class="disabled-link"
				 data-tooltip="This is an example of what happens when the text supplied to the tooltip is rather verbose instead of the enjoyable concise messages that are typically used to relay information instead. No one likes to read a novel in a tooltip, but hey, it's not my decision, it just has to be accounted for due to an excessive and old page."
				 data-tooltiptype="neutral"
				 onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
				 Really Verbose Message</a>
		</li>
	</ul>
</div>
<i id="globalTooltip" data-owner="none" class="tooltip"></i>

如何确保工具提示始终与元素偏移而不是在元素上飞过？

确保某个元素与另一个元素有适当的偏移量？

0 个答案: