side- Type
"top" | "bottom" | "left" | "right"- Default
"bottom"- Description
- Preferred side for the popover.
Components / Overlay
Popover
தேங்கும் பலகம்
Popovers are floating panels triggered by clicking a button. Use them for inline forms, filters, and supplementary information that needs more space than a tooltip.
தேங்கும் பலகங்கள் ஒரு பொத்தானை கிளிக் செய்வதால் தூண்டப்படும் மிதக்கும் பலகங்கள்.
Filter popover
Component preview
Search filtersதேடல் வடிகட்டிகள்Structure
Anatomy
3 parts documented for implementation and review.
1
PopoverTrigger
தூண்டிrequired<button>Interactive element that opens the popover on click. Receives aria-haspopup and aria-expanded. Can wrap any element via asChild. Unlike Tooltip, stays open until explicitly dismissed.
2
PopoverContent
உள்ளடக்கம்required<div>Floating content panel with role=dialog and focus management. First focusable element receives focus on open. Closes on Escape or outside click. Smart positioning avoids viewport overflow.
3
Arrow
அம்புsvgSmall CSS triangle arrow connecting the content to the trigger. Color matches popover background. Auto-positioned based on placement direction.
API
Props
align- Type
"start" | "center" | "end"- Default
"center"- Description
- Alignment relative to trigger.
sideOffset- Type
number- Default
4- Description
- Distance in px from trigger.
open- Type
boolean- Default
- -
- Description
- Controlled open state.
onOpenChange- Type
(open: boolean) => void- Default
- -
- Description
- Fired on open/close.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred side for the popover. |
align | "start" | "center" | "end" | "center" | Alignment relative to trigger. |
sideOffset | number | 4 | Distance in px from trigger. |
open | boolean | - | Controlled open state. |
onOpenChange | (open: boolean) => void | - | Fired on open/close. |
Best practices
Use Popover for compact interactive content
சுருக்கமான ஊடாடும் உள்ளடக்கத்திற்கு Popover பயன்படுத்தவும்
Popovers are ideal for filter panels, mini-forms, and date pickers — content that needs more space than a tooltip but doesn't require a full modal.
வடிகட்டி பலகங்கள், சிறு படிவங்கள், தேதி தேர்வுகள் — Tooltip-ஐ விட அதிக இடம் தேவைப்படும் ஆனால் முழு dialog தேவையில்லாத உள்ளடக்கத்திற்கு Popover சரியானது.
Don't use Popover for simple text tooltips
எளிய உரை குறிப்புகளுக்கு Popover பயன்படுத்தாதே
If you only need a short text label on hover, use Tooltip. Popover requires a click — it's overkill for non-interactive content.
hover-ல் குறுகிய உரை தலைப்பு மட்டும் தேவைப்பட்டால் Tooltip பயன்படுத்தவும். Popover கிளிக் தேவைப்படுகிறது — ஊடாடாத உள்ளடக்கத்திற்கு அது அதிகம்.
Close the Popover when the action inside it completes
உள்ளே உள்ள செயல் முடிந்தவுடன் Popover-ஐ மூடவும்
After a user applies filters or submits a mini-form inside a popover, close it programmatically — don't leave it open after the action is done.
செயல் முடிந்தவுடன் onOpenChange(false) மூலம் Popover-ஐ மூடவும்.
Don't open multiple Popovers simultaneously
ஒரே நேரத்தில் பல Popover-களை திறக்காதே
Multiple open popovers create visual clutter and break the focus management model — only one popover should be open at a time on the page.
பல திறந்த Popover-கள் காட்சி குழப்பத்தை உருவாக்குகின்றன மற்றும் கவனம் மேலாண்மை மாதிரியை உடைக்கின்றன.