1

我在页面左侧有一个链接列表。我想改进此列表，以便当我将光标放在此列表中的某个项目上时，会出现某种标签，该标签会简要说明链接指向的内容。有问题的 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 属性，那将是可取的。

如果这个问题有任何不清楚的，请随时问我。

4

1 回答 1

0

简单的tooltip可以通过usititle属性实现：当鼠标移到元素上时，信息显示为tooltip文本。

<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;
}
<a class="searchEngineLink"  gloss="What a great guy" href="http://www.bob.com">Bob</a>

<a class="searchEngineLink"  gloss="What a smart guy" href="http://www.bob.com">Bob2</a>

<br>

<a class="searchEngineLink"  gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>

于 2021-07-10T16:01:48.810 回答