How to Show Image Alt-Text on Hover in Squarespace
Squarespace is an incredible website-building platform for photographers, creatives, and small business owners, but sometimes it doesn’t make it easy to find important information - such as image alt-text. Although alt-text is essential for SEO and accessibility, it’s not displayed by default on hover. If you’re after a nice tooltip-style overlay of alt-text on image hover, this article might help you.
Why Show Alt Text on Hover?
Context or credit your images
Use the product names or the title of photos.
Enhance the [User Experience] by providing more detail without complexity
Maintain your SEO and accessibility.
What We’ll Do
For that, we need a little bit of JavaScript and CSS to:
Use your image alt text.
Show that text as an image while floating over it
Make it look like a neat, modern tooltip overlay
Step-by-Step Implementation
Step 1: Add JavaScript to Inject data-alt on Each Image
This script finds all image blocks and stores their alt text in a new attribute called data-alt.
Paste this into:
Settings → Advanced → Code Injection → Footer
<script>
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll(".sqs-block-image .image-block-outer-wrapper img");
images.forEach(img => {
const alt = img.getAttribute("alt");
if (alt) {
img.closest('.image-block-outer-wrapper .sqs-image-content').setAttribute("data-alt", alt);
}
});
});
</script>
Step 2: Add CSS to Style the Tooltip
Now we’ll make the data-alt content appear as a hover overlay using pure CSS.
Paste this into: Pages → Custom code → Custom CSS
/* Show image alt text on hover */
.image-block-outer-wrapper .sqs-image-content[data-alt] {
position: relative;
}
.image-block-outer-wrapper .sqs-image-content[data-alt]::after {
content: attr(data-alt);
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 13px;
padding: 6px 10px;
border-radius: 4px 4px 0 0;
opacity: 0;
transition: opacity 0.3s ease;
white-space: nowrap;
pointer-events: none;
z-index: 1000;
}
.image-block-outer-wrapper .sqs-image-content[data-alt]:hover::after {
opacity: 1;
}
Result
When a visitor hovers over an image, the alt text appears smoothly at the bottom of the image.
This tooltip will automatically work on every image with an alt attribute.
No changes are needed to your page content or image blocks.
Optional Customizations
You can tweak the tooltip to better match your brand:
| Feature | CSS to Adjust |
|---|---|
| Text size | font-size |
| Color scheme | background and color |
| Position | Change bottom to top |
| Rounded edges | border-radius |
Want to show the tooltip next to the mouse cursor instead of fixed at the bottom? Let us know and we’ll guide you.
SEO & Accessibility Note
Despite the fact that you are now using the alt text visually, the screen reader and search engines will continue to profit from it. This technique does not harm SEO or accessibility, and it enhances the user experience.
Final Thoughts
By displaying alt-text on hover, you’re adding a nice interactive layer to your Squarespace site and not losing out on SEO and accessibility. Whether you’re a photographer captioning your work, an eCommerce brand marking your product line, or a designer adding a small explanation, this tooltip-style tweak enhances your site without bogging down your layout.
Best of all, the setup is flexible: you can alter colors, fonts, and positioning to fit your branding perfectly. Just a few lines of code will turn hidden alternate-text into a sleek detail that will not only make your images more engaging but also more informative.
Frequently Asked Questions
-
For Squarespace, alt text is more of an SEO/accessibility feature, not a design element. That's why it is not shown on hover unless you customize it with custom code and make it visible.
-
No, search engines and screen readers continue to read the alt text as they would without the plugin. That doesn't detract from its accessibility while at the same time adding an unnecessary decorative layer for your users to parse visually.
-
No. The script auto-detects and shows the current alt text in your images. As long as your images have alt attributes to begin with, the tooltip will work.
-
Yes. The font size, colors, position, and shape of the tooltip can all be customized in the CSS. You can, for instance, put it at the top instead of the bottom, or switch the background color to one that matches your brand.
-
Yes. The script was written for Squarespace’s standard image block structure, so it functions on most (all?) image placements. If you are using gallery blocks, you may need to tweak the selectors a bit.
