Getting Started
Templates
Components
A polished accordion component that displays image previews when hovering over each item. On desktop, images appear as floating tooltips. On mobile and touch devices, images display inline within the expanded content for better accessibility.
Key Features:
import { AccordionWithImageTooltip } from "@/components/ui/accordion-with-image-tooltip"
const items = [
{
id: "01",
title: "Design",
content: "Our design process focuses on creating intuitive interfaces.",
image: "/images/design.jpg",
},
{
id: "02",
title: "Development",
content: "We build scalable applications with modern technologies.",
image: "/images/development.jpg",
},
]
export default function Example() {
return (
<AccordionWithImageTooltip
items={items}
defaultOpenId="01"
tooltipSide="right"
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItemData[] | required | Array of accordion items with images |
defaultOpenId | string | undefined | ID of the item to open by default |
className | string | undefined | Additional CSS classes for the wrapper |
tooltipDelay | number | 120 | Delay in ms before tooltip appears |
tooltipSide | "top" | "right" | "bottom" | "left" | "right" | Position of the tooltip relative to the title |
tooltipImageClassName | string | undefined | Custom dimensions for tooltip images (e.g., "h-64 w-80") |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the item |
title | string | Display title |
content | string | Expanded content text |
image | string | URL to the preview image |
The component automatically detects touch devices and small screens:
This ensures a consistent experience across all devices without requiring additional configuration.