Question 240138 in Html Question posted in
Some basic documentation can be found here.

Html – I want a tooltip on hover inside the image

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?

Tags:

2

Answers


  1. 0 
    /* 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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search