I want a tooltip on hover inside the image

Question

I want a tooltip on hover inside the image. Using mui-tooltips give the tooltip position outside the image. I want the tooltip to work exactly like how title attribute works in img tag but i also want to style the tooltip so i couldn't use title attribute.

I have refer the following blog post (How to change the style of the title attribute inside an anchor tag?) and other posts related to this but nothing seems to be helping. Can someone please provide an idea?

Please provide enough code so others can better understand or reproduce the problem. — Community, Aug 29 '23 at 07:25

score 1 · Answer 1 · answered Aug 29 '23 at 08:17

try top:0 instead of bottom: 100% then the text will appear on the image above. if you want the text to not appear on the image but outside the image above give padding on the image-container: hover or give a margin-top on the image-container then it will appear above. because it doesn't have any space in the top to see the text right so you have to give some space to see the text.

score 0 · Answer 2 · answered Aug 29 '23 at 06:05

/* 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>

The .tooltip element is positioned absolutely within the .image-container. The bottom property is set to 100% so that it appears just above the image, and the left property is set to 50% to horizontally center the tooltip. The transform: translateX(-50%) ensures that the tooltip is centered precisely. The display: none style hides the tooltip by default, and the tooltip is shown on hover using .image-container:hover .tooltip.

I want a tooltip on hover inside the image

2 Answers2