Tooltip in CSS ek chhota sa popup text hota hai jo tab show hota hai jab user kisi element pe mouse hover karta hai. Iska use extra information dene ke liye hota hai.
Tooltip in CSS ka basic concept
Ek tooltip ke 2 main parts hote hai:
- Container → jisme hover hota hai
- Tooltip text → jo hidden hota hai aur hover pe show hota hai
Tooltip in CSS ka basic example
CSS Tooltip working
- position: relative → parent ke liye
- position: absolute → tooltip ko exact place karne ke liye
- visibility: hidden → default hidden
- hover → show karne ke liye
Tooltip in CSS positioning
Tum tooltip ko different sides pe place kar sakte ho:
Right side
Left side
Top side
Bottom side
Fade effect
Smooth animation ke liye opacity + transition use hota hai:
CSS Tooltip arrows (speech bubble style)
Arrow banane ke liye ::after pseudo-element use hota hai:
Bottom arrow
Important points
- Tooltip hidden hota hai by default
- Hover pe visible hota hai
- position property important hai
- z-index use hota hai overlap control ke liye
Tooltip in CSS ek simple aur effective way hai user ko extra information dene ka without cluttering the UI, aur ise easily customize kiya ja sakta hai position, animation aur arrows ke saath.
