通过点击为图像创建工具提示（html、scss）

Question

我有一个带有点击 URL 的社交媒体图标。当有人将鼠标悬停在图标上时，我希望在其上显示一个句子（工具提示）。我使用了“标题”命令，它正在完成工作，但我无法设置它的样式。所以，我想使用内联跨度或跨度类就可以完成这项工作。我读过一些在线文章，并尝试模仿这些设置，但我就是无法显示工具提示。我需要有人展示 html 应该如何（div 类/span 类）以及 scss 设置。

这是我没有工具提示的代码，这就是我想要实现它的地方

<div class="socials">
<a href="https://twitter.com/user" target="_blank">
<img src="../images/twitter.png"  alt="twitter logo" >
</a>

注意：我编码才 4 周。因此，我正在寻找易于理解和排除故障的东西。

这些网站中看到的 html/css 设置是我使用过的，但无法使其工作：

1. 如何使用 CSS 在悬停时向图像添加工具提示
2. 如何在单击图像链接时显示工具提示
3. https://www.w3schools.com/css/css_tooltip.asp

此网站上看到的工具提示具有我正在寻找的最接近的工具提示： 4. http://theorniphile.info/creating-tooltips-for-images-with-css/index.html

他们中的大多数都没有图像点击的示例。

期待您的来信，谢谢！

Answer 1

使用伪元素并定位它

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  position: relative;
}

a:after {
  content: "this is a tooltip";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateY(-120%);
  padding: 0 .25em;
  background: lightblue;
  width: fit-content;
  white-space: nowrap;
  display: none;
}

a:hover:after {
  display: block;
}

<a href="https://twitter.com/user" target="_blank">
  <img src="https://picsum.photos/50/50" alt="twitter logo">
</a>