side- Type
"top" | "bottom" | "left" | "right"- Default
"top"- Description
- Preferred side to render the tooltip.
Components / Overlay
Tooltip
குறிப்பு நுனி
Tooltips show a short label when the user hovers or focuses an element. Use them to clarify icon buttons, abbreviations, and truncated text.
குறிப்பு நுனிகள் பயனர் ஒரு கூறின் மீது நகர்த்தும் அல்லது கவனம் செலுத்தும்போது குறுகிய தலைப்பை காட்டுகின்றன.
Basic tooltip
Component preview
Icon button tooltipsசின்ன பொத்தான் குறிப்புகள்Structure
Anatomy
2 parts documented for implementation and review.
1
TooltipTrigger
தூண்டிrequired<button>Trigger element showing tooltip on hover and keyboard focus. Can wrap any interactive element via asChild. Appears after a short delay (default 700ms). Long-press on touch devices.
2
TooltipContent
உள்ளடக்கம்required<div>Small floating label with dark background (bg-primary) and white text. Text-xs with px-3 py-1.5. Smart positioned to avoid viewport overflow. Animates with fade-in and slide.
API
Props
sideOffset- Type
number- Default
4- Description
- Distance in px from trigger to tooltip.
delayDuration- Type
number- Default
300- Description
- ms before tooltip appears on hover.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "top" | Preferred side to render the tooltip. |
sideOffset | number | 4 | Distance in px from trigger to tooltip. |
delayDuration | number | 300 | ms before tooltip appears on hover. |
Usage guidance
- Tooltips must never contain essential information — they are invisible on touch devices.
- Use for icon-only buttons: always provide a tooltip with
aria-labelmatching the tooltip text. - Keep tooltip text under 60 characters. For longer explanations use a Popover.
- Tamil tooltips: use
font-tamilinsideTooltipContent.
Best practices
Use Tooltip to label icon-only buttons
சின்னம் மட்டும் உள்ள பொத்தான்களுக்கு Tooltip பயன்படுத்தவும்
Wrapping icon buttons with a Tooltip gives sighted non-hover users and screen readers a meaningful label.
சின்னம் மட்டும் உள்ள பொத்தான்களை Tooltip மூலம் சுற்றி திரை வாசகர்களுக்கும் பயனர்களுக்கும் பொருளை தெரிவிக்கவும்.
Don't put essential information only in a tooltip
அத்தியாவசிய தகவலை Tooltip-ல் மட்டும் வைக்காதே
Tooltips are invisible on touch devices — essential guidance must always be visible in the main UI.
Tooltip தொடு திரைகளில் தெரியாது — அத்தியாவசிய தகவல் எப்போதும் பக்கத்தில் தெரியும்படி வைக்கவும்.
Keep tooltip text under 80 characters
Tooltip உரையை 80 எழுத்துகளுக்குள் வைக்கவும்
Short tooltip labels (under 80 chars) are readable at a glance; longer explanations belong in a Popover.
குறுகிய Tooltip உரை ஒரு பார்வையில் படிக்கலாம் — நீண்ட விளக்கங்களுக்கு Popover பயன்படுத்தவும்.
Don't use Tooltip on disabled elements
முடக்கப்பட்ட கூறுகளில் Tooltip பயன்படுத்தாதே
Users on mobile cannot hover disabled elements — if you need to explain why something is disabled, show inline text instead.
மொபைல் பயனர்கள் முடக்கப்பட்ட கூறுகளை hover செய்ய முடியாது — ஏன் முடக்கப்பட்டது என்று வரியில் காட்டவும்.