Tooltip on image

html

responsive-design

aria-describedby

best-practices

byAnton Shumikhin·Jan 1, 2025

Create a tooltip for an image by enclosing the <img> in a <div> and using the ::after pseudo-element in CSS for the tooltip content. Assign position: relative; to the <div> and position: absolute; to ::after. Below is a quick demonstration:

<div class="tooltip">
  <img src="image.jpg" alt="Descriptive Alt Text">
</div>

.tooltip {
  position: relative; // Allows tooltip to relate to this parent element
  display: inline-block; // Acts like text with size
}

.tooltip::after {
  content: 'Behold! The tooltip text'; // The tooltip text appears here, change as you wish
  position: absolute; // This allows precise control over tooltip position
  bottom: 100%; // Position tooltip above the image
  left: 50%; // Centered left-right, just right
  transform: translateX(-50%); // Nifty trick to further center the tooltip
  background: black; // Tooltip's box color, because classic never goes out of style
  color: white; // Color of tooltip text, contrasts with background 
  padding: 5px; // Little padding gives the text some breathing room
  border-radius: 5px; // Smoothens those harsh corners
  visibility: hidden; // Initially keep the tooltip hidden
  opacity: 0; // Hidden means really, really hidden
  transition: opacity 0.3s; // Smooth as butter transition effect
}

.tooltip:hover::after {
  visibility: visible; // Display the tooltip when it's time to shine
  opacity: 1; // Cardiff Giant says hello
}

With this nifty code, a tooltip appears when you hover over the image. With an easy option to customize key styling, you can marry functionality and aesthetics seamlessly.

For creating a tooltip in a jiffy, the HTML title attribute comes to the rescue. Just add it to your image element (<img>), and you've got yourself a tooltip.

<img src="image-source.jpg" alt="All about the image" title="I'm a simple tooltip. It's nice to meet you!">

Now, all you need is to hover and the tooltip is displayed by the browser instantly. This attribute is the default HTML quick fix to get a tooltip up and running. Remember, simplicity is the ultimate sophistication.

Positioning with CSS and divs

If your tooltip says: "I want more than what the title attribute offers", then let's proceed with a div and ::before or ::after pseudo-elements in CSS:

<div class="tooltip" aria-describedby="tt1">
  <img src="image.jpg" alt="All about the image">
  <span id="tt1" class="tooltiptext">Tooltip with handy information just for you.</span>
</div>

With absolute positioning and z-index, the tooltip can float precisely above the image without a care in the world.

Introduce the power of JavaScript for adding dynamic content to your tooltips (because why should images have all the fun?):

document.querySelectorAll('img').forEach(img => {
  img.title = img.alt; // alt text + tooltip = dynamic duo. Period.
});

This slice of JavaScript beauty can make tooltips responsive to different user interactions, making your page feel lively and engaging.

Adapting tooltips for responsive design

When creating tooltips for different devices, consider the following:

Media queries: Adjust tooltip size and position to fit all screen sizes like a glove.
Edge of viewport: Ensure tooltips don't spill out or clip at the screen edges.
Touch devices: Use touch events to manage tooltips, as touch devices and hover aren't best buds.

Accessibility: Creating tooltips for all users

Accessibility should be at the forefront when designing tooltips. Ensure all users can benefit from them, and they are not just pretty gimmicks:

Use aria-describedby to link the tooltip to the image.
Make sure the tooltips are accessible and dismissible with keyboard navigation.
Test the tooltip with screen readers and include role="tooltip" for maximum compatibility.

Best practices and common pitfalls

Overflow: If the tooltip text is too long, it might overflow. Limit text length or go for flexible sizing.
Positioning: Incorrectly positioned tooltips might overlap elements or appear off-screen.
Performance: Overdoing JavaScript or complex styles could affect page load or interactivity.

Following best practices can save some potential heartaches: