Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tooltip with Image for React

An outline Preview button. Its tooltip shows a photo of headphones, the title Product Preview and a line of detail.

An outline button says Preview. Its tooltip shows a photo of black headphones, then Product Preview, then a line about the full product details.

Use a tooltip with a picture for a quick preview, such as a product. A Hover Card fits when the preview also needs a link. On React, Base UI does not load the photo.

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

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Preview
    </TooltipTrigger>
    <TooltipContent className="p-0">
      <div className="flex flex-col gap-1 p-3">
        <img
          alt="Black headphones on a yellow background"
          className="mb-1 h-[150px] w-[257px] rounded-md object-cover"
          height={300}
          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=514&h=300&fit=crop"
          width={514}
        />
        <p className="font-semibold">Product Preview</p>
        <p className="text-xs">
          View the full product details and specifications
        </p>
      </div>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

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.

API Reference

Tooltip

No extra props in this demo. The rest is on the Tooltip page.

Button

Sets variant="outline". The rest is on the Button page.

All 8 tooltip examples