我想要一个悬停在图像内的工具提示。使用 mui-tooltips 给出图像外部的工具提示位置。我希望工具提示的工作方式与 img 标签中 title 属性的工作方式完全相同，但我也想设置工具提示的样式，这样我就无法使用 title 属性。
我参考了以下博客文章（如何更改锚标记内标题属性的样式？）以及与此相关的其他帖子，但似乎没有任何帮助。有人可以提供想法吗？
/* styles.css */
.image-container {
display: inline-block;
position: relative;
}
.tooltip {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
border-radius: 3px;
font-size: 14px;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.image-container:hover .tooltip {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Image Tooltip</title>
</head>
<body>
<div class="image-container">
<img src="your-image-source.jpg" alt="Your Image">
<div class="tooltip">Your Tooltip Text</div>
</div>
</body>
</html>.tooltip 元素绝对位于.image-container 内。底部属性设置为 100%，以便它出现在图像上方，左侧属性设置为 50%，以使工具提示水平居中。变换：translateX(-50%) 确保工具提示精确居中。 display: none 样式默认隐藏工具提示，使用 .image-container:hover .tooltip 在悬停时显示工具提示。