Tooltip
A popup that displays information related to an element when it receives hover or focus.
Installation
tsx
import { Tooltip } from "madagent";Default (Top)
Positions
| Prop | Type | Default | Description |
|---|---|---|---|
content* | ReactNode | - | Tooltip content |
position | "top""bottom""left""right" | "top" | Position relative to the trigger |
children* | ReactNode | - | Trigger element |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ display: "flex", gap: 24, justifyContent: "center", padding: 40 }}>
<Tooltip content="معلومات مفيدة" position="top">
<Icon icon={CircleHelp} tabIndex={0} aria-label="معلومات" />
</Tooltip>
</div>