Display text on MouseOver for image in html

html

responsive-design

performance

best-practices

byAlex Kataev·Nov 15, 2024

Display text on mouseover in html using the title attribute, added to an <img> tag:

<img src="your-image.jpg" alt="Image description" title="Your Mouseover Text" />

For a customized tooltip, wrap your <img> in a <div> and utilize a <span> for tooltip text:

<div class="tooltip">
  <img src="your-image.jpg" alt="Image description">
  <span class="tooltiptext">Custom Mouseover Text</span>
</div>

Styling the tooltip with CSS):

.tooltip .tooltiptext {
  visibility: hidden; /* Text is initially invisible */
  position: absolute;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Styling includes center alignment, black background, white text */
}
.tooltip:hover .tooltiptext {
  visibility: visible; /* Becomes visible upon image hover */
}

Dynamically displaying text with JavaScript

You can make use of JavaScript for more interactivity. The onmouseover and onmouseout events on an image allow for dynamic manipulation of text visibility:

/* This part reads like a top-secret spy operation. But it's not. It's JavaScript magic! */

function showTooltip(element, text) {
    var tooltip = document.createElement('div');
    tooltip.innerHTML = text;
    tooltip.classList.add('js-tooltiptext');
    document.body.appendChild(tooltip);
    element.onmousemove = function(e) {
        tooltip.style.top = (e.pageY + 10) + 'px';
        tooltip.style.left = (e.pageX + 10) + 'px';
    };
}
function hideTooltip() {
    var tooltips = document.querySelectorAll('.js-tooltiptext');
    /* Enough building, now some destruction */
    tooltips.forEach(function(tooltip) {
        tooltip.remove();
    });
}

Use these functions with mouseover and mouseout:

<img src="your-image.jpg" alt="Image description" onmouseover="showTooltip(this, 'Mouseover Text')" onmouseout="hideTooltip()">

Don't forget to apply your CSS magic to the dynamic tooltip too!

Pondering over accessibility and tooltips

Keeping tooltips accessible is a mission critical. Assisted technologies might not always understand the title attribute. So use aria-label, aria-labelledby, or aria-describedby for accessible UI.

Making hover effects navigate the high seas of touch devices

Touch devices don't do cursors, so hover effects need to be sailed to touch-enabled territories. Adapt hover annotations into click or tap events to display information. This ensures that user experience is kept shipshape across all devices:

@media (hover: none) {
    .tooltip:hover .tooltiptext,
    .tooltip:focus-within .tooltiptext {
        visibility: visible; /* Yo ho ho and a bottle of rum! Your tooltip is now visible on touch devices */
    }
}

Engaging users with interactive Image tooltips

Maximize user engagement with interactive tooltips. Add more than text — think images or action buttons within tooltip content. This creates an interactive voyage that can entertain, educate, or convert web voyagers right from the image hover.

<div class="interactive-tooltip">
  <img src="interactive-image.jpg" alt="Interactive Image">
  <div class="interactive-content"> Discover this feature! <button>Click to start the adventure!</button></div>
</div>