仅 CSS 的图像工具提示答案

【问题标题】：CSS-only image tooltip仅 CSS 的图像工具提示
【发布时间】：2021-10-25 18:38:05
【问题描述】：

我尝试创建一个从属性值生成的纯 CSS IMG-Tooltip。我尝试了以下代码

<img src="blabla.jpg" data-caption="this is my caption" />

和 CSS 代码：

img {
  position: relative;
}
img:after {
  content: attr(data-caption);
  position: absolute;
  bottom: 2em;
  left: 2em;
  z-index: 2
}

这样的方式对于 div 容器是没有问题的。但是我怎样才能让这个工作在图像上呢？

谢谢你，托马斯

【问题讨论】：

图片不能有伪元素。
stackoverflow.com/questions/7396469/…

标签： html css image tooltip

【解决方案1】：

您有多种使用 CSS 创建工具提示的方法，但这里有一个为图像创建工具提示的小示例。

在下面的示例中，我使用了html 的title 属性，这也有点类似。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" title="imgae">



  
</body>
</html>

你会在这里找到更多有用的答案：Answers

如果您觉得此代码有帮助，请告诉我。

【讨论】：

我正在寻找一种方法来实现它，而无需任何进一步的 html 标记。如前所述，它适用于 div 等其他元素。 IMG-Tags 似乎无法识别 :after 伪元素。 -> 标记在 cms 中使用，我们无法控制输出标记。