如何使 CSS 工具提示在原始项目上保持严格，而不是在新生成的工具提示上？答案

【问题标题】：How to make CSS tooltip stay up strictly while over original item, not also over newly generated tooltip?如何使 CSS 工具提示在原始项目上保持严格，而不是在新生成的工具提示上？
【发布时间】：2018-04-05 06:28:58
【问题描述】：

我只希望在用户严格将鼠标悬停在原始元素上时保留工具提示文本，但如果用户将鼠标悬停在由悬停生成的工具提示文本正文上，则默认情况下它也会保留同时不再悬停在原始元素上.那么，如何（如果可能）在用户将光标移动到不再使用悬停样式的原始元素上方时使工具提示文本消失，即使光标可能仍悬停在工具提示文本上？

遗憾的是，我什至无法想象如何尝试改变这种行为，因此我的代码与 w3schools 提供的关于如何制作/使用工具提示的代码完全相同（在所有相关方面）。代码如下，或者您可以在此处访问他们的链接 - https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

<style>
  .tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
 }

 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;

   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }

.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

【问题讨论】：

添加一些更有意义的标签可能有助于获得答案。
感谢您的提示，我还想补充更多！ ...我只是不确定还能放什么。我也被阻止放置标签“tooltiptext”，因为我没有足够的声誉。我从来没有真正问过问题，所以如果你愿意提供任何建议都会很棒。
css 标签应该已经有所帮助，因为人们在这里使用许多不同的语言。如果您发布了记录您当前尝试的代码，那就更好了。很遗憾，我无法就特定主题为您提供帮助。
反正你帮了很多忙！谢谢！

标签： css hover tooltip

【解决方案1】：

我自己想通了！

我的解决方案是使用 JavaScript 而不是 CSS 来处理可见性样式，以便我可以更好地控制有条件地呈现工具提示文本。我也有点幻想，我的解决方案有点矫枉过正，因为我希望能够将此功能呈现给许多元素，尽管这里的示例只涉及一个 :)

这是代码！

strictHoverStyle();

function strictHoverStyle(){
	let overTooltipTexts = false;
	let tooltipSet = document.getElementsByClassName('tooltip');
	let tooltiptextSet = document.getElementsByClassName('tooltiptext');
	let tooltips = Array.from(tooltipSet);
	let tooltiptexts = Array.from(tooltiptextSet);

	for(let i = 0; i<tooltips.length; i++){
		tooltips[i].addEventListener('mouseover', function(){
			if(overTooltipTexts){
				tooltiptexts[i].style.visibility = 'hidden';
				tooltiptexts[i].style.opacity = 'opacity 1s';
				tooltiptexts[i].style.transition = 0;
			} else{
				tooltiptexts[i].style.visibility = 'visible';
				tooltiptexts[i].style.opacity = 1;
			}
		});

		tooltips[i].addEventListener('mouseout', function(){
			tooltiptexts[i].style.visibility = "hidden";
			tooltiptexts[i].style.opacity = 0;
		});

		tooltiptexts[i].addEventListener('mouseover', function(){
			overTooltipTexts = true;
		});

		tooltiptexts[i].addEventListener('mouseout', function(){
			overTooltipTexts = false;
		});
	}	
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>Strict Hover</title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<h1>
			<span class="tooltip">STRICT HOVER!<span class="tooltiptext">Tooltip text</span></span>
		</h1>	
	</body>
	<script src="index.js"></script>
</html>

【讨论】：