Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Content

Tooltip with Image for React

A Preview button whose tooltip shows a product photo above a title and a line of detail.

Framework
UI library

A picture identifies a product faster than its name. This React example opens a Tooltip on a Preview button with a product photo, a bold title and a line of detail. p-0 removes the content's own padding and an inner column adds p-3 around the image and the text. Use it for quick previews of products, files or thumbnails where seeing the item helps people decide whether to open it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use tooltips with images versus other patterns?

For a glance at something before opening it. A Tooltip can't hold anything interactive, so when people might zoom, follow a link or act on the preview, use a Hover Card, which can hold a richer preview.

What image dimensions work best in tooltips?

Small enough not to cover the page: 257 by 150 pixels here, about 16:9, inside the tooltip's 320px maximum width. The image is requested at twice that size for sharp screens, and object-cover crops it to fit.

Why use p-0 on the content with p-3 on an inner div?

p-0 replaces the tooltip's own padding, which is shaped for a line of text, and the inner div sets one even p-3 around the image and the text, with gap-1 between them.

How important is alt text for images in tooltips?

Essential. The alt text, Black headphones on a yellow background, says what the photo shows for screen readers and appears if the image fails to load. Describe the product, not the word preview.

How do I handle slow-loading images in tooltips?

The image loads when the Tooltip opens, so keep it light: request it at the size it's shown, in a modern format, and set width and height so the tooltip keeps its size while the image arrives.

Do image tooltips work on mobile touch devices?

Not well: there is no hover on a touch screen. Show the thumbnail inline on small screens, or open the preview on tap with a Popover.

All 8 tooltip examples