仅使用 css 将文本悬停在上面时如何使标签弹出

如何解决仅使用 css 将文本悬停在上面时如何使标签弹出

我在页面左侧有一个链接列表。我想改进这个列表，这样当我把光标放在这个列表中的一个项目上时，会出现某种标签，它简要描述了链接指向的内容。有问题的 html 是使用来自 asciidoc 源的 Antora 自动生成的，据我所知，我所能做的就是为链接文本的不同部分添加一个 css 类或 id 粗体。我无法添加任何 Javascript 或嵌套的 css 类。

这是我的尝试：

<!DOCTYPE html>
<html>
<head>
<style>

#Bob.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#Bob.tooltiptext {
  font-size: 5px;
}

#Bob.tooltiptext:hover {
  visibility: visible;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>

<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong> 
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>

</body>
</html>

这显然没有达到我想要的效果。它所做的只是在小字体中添加一点文本，当我滚动它时，它会在某种盒子中增加为更大的字体。

如果有人能想出某种方法在页面中的某个链接上弹出标签，甚至使用一些我没有想到的完全不同的方法，我将不胜感激。请注意，我将有大约 200 个链接，所以如果我可以有一个解决方案，不需要我为每个链接的每个不同 id 设置一组 css 属性，那将是可取的。

如果这个问题有任何不明白的地方，请随时问我。

解决方法

简单的工具提示可以通过使用cmnd = r"pacmd list-sink-inputs | perl -0777pe's/ *index: (\d+).+?application\.process\.id = "([^\n]+)"\n.+?(?=index:|$)/$2:$1\n/sag'"属性来实现：当鼠标移动到元素上时，信息显示为工具提示文本。

title

您还可以通过使用 <a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!"> <strong id="Bob" class="tooltip">Bob</strong> </a> 属性插入生成的内容来制作自己的自定义工具提示。（每个链接的说明）。

content

.searchEngineLink {
  display: inline;
  position: relative;
}

.searchEngineLink:hover:after {
  background: #eee;
  
  border-radius: 5px;
  bottom: -34px;
  color: black;
  content: attr(gloss);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: auto;
  white-space:nowrap;
}

.searchEngineLink:hover:before {
  border: solid;
  border-color: #ddd transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 40%;
  position: absolute;
  z-index: 99;
}