如何在data-tooltip中显示图片？现有文本tooltip需改造

核心结论 #

默认情况下，通过attr(data-tooltip)实现的纯CSS tooltip只支持纯文本内容。因为CSS的content属性会将data-tooltip的属性值当作字符串直接输出，不会解析其中的HTML标签——这就是你直接写<img>标签却无效的原因。

针对你的需求的解决方案 #

你用的这个纯CSS tooltip依赖伪元素（::before/::after）的content属性展示内容，要改成显示图片，需要调整伪元素的样式逻辑，以下是两种可行方案：

方案1：直接给伪元素设置背景图片

修改CSS中tooltip对应的伪元素样式，清空原有的content文本，改用background-image加载图片：

.tooltip-top::after {
  content: ''; /* 移除原文本内容 */
  background-image: url('https://www.w3schools.com/html/pic_trulli.jpg');
  width: 200px; /* 按需设置图片宽度 */
  height: 150px; /* 按需设置图片高度 */
  background-size: cover; /* 让图片适配容器 */
  /* 保留原示例中的定位、边框、圆角等其他样式 */
}

对应的HTML可以简化，不需要data-tooltip属性（如果不需要额外存数据的话）：

<a href="#" class="tooltip-top">Tooltip</a>

方案2：用data-tooltip存储图片URL（更灵活）

如果希望通过data-tooltip属性动态指定图片地址，可以这样写：
HTML：

<a href="#" class="tooltip-top" data-tooltip="https://www.w3schools.com/html/pic_trulli.jpg">Tooltip</a>

CSS：

.tooltip-top::after {
  content: '';
  background-image: url(attr(data-tooltip));
  width: 200px;
  height: 150px;
  background-size: cover;
  /* 保留原示例的其他样式 */
}

注意：部分旧浏览器对url(attr())的支持有限，建议在目标浏览器中测试兼容性。

内容的提问来源于stack exchange，提问作者Shahpari