ZEVA 2 - Tooltip component - style and behavior

**Describe the task**
Design and implement a reusable tooltip component with defined visual style, size constraints, and interaction behavior.
The component must support different placements relative to the trigger element (icon, button, link, etc.) and dynamically position the pointer toward the trigger.

**Purpose**
Provide consistent, accessible contextual help across the product.

**Design system**
[Link ](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=442-1670&t=T1mVHExNUezbW908-1)

**Acceptance Criteria**

Structure & style
- [ ] Tooltip uses the approved design system styles (background, typography, spacing, border radius
- [ ] Text is left-aligned and readable with standard medium body size 16 from the design system.
- [ ] Max width: 420 px
- [ ] Min width: 160 px.
- [ ] Max height: based on content, but:
- [ ] after 6–7 lines, tooltip becomes scrollable OR content must be shortened
- [ ] Tooltip must wrap text and not overflow viewport.

Placement
- [ ] Tooltip supports positions: top, bottom, left ,right, auto (default; selects best available space in viewport)
Pointer behavior
- [ ] Pointer must visually connect tooltip with the trigger element.
- [ ] Pointer position changes dynamically based on placement:
- [ ] top - at bottom center
- [ ] bottom - at top center
- [ ] left -at right center
- [ ] right - at left center

Interaction
- [ ] Appears on hover (desktop) and focus (keyboard navigation).
- [ ] Delay: show: 200–300 ms hide: 100–150 ms
- [ ] Tooltip disappears when: pointer leaves trigger area or user taps outside

**Additional context**
Tooltip is used for icons, form labels, and contextual help.
Content should be short, explanatory, and not replace full documentation.
Avoid long paragraphs; tooltips are not intended for dense information.