# LivaTooltip
Package: @dataliva/livalib
Description: @dataliva/livalib ipucu (tooltip) bileşeni.

DevExtreme Tooltip üzerine kurulu ipucu bileşeni. `target` prop'una hedef
elemanın CSS seçicisi verilir; kullanıcı hedefin üzerine geldiğinde `text`
içeriği, `position` ile belirlenen yönde görünür. Metin `width` genişliğine
sığmazsa `maxLines` satırla sınırlandırılır.

```tsx
import { LivaTooltip } from "@dataliva/livalib";
```

## Pozisyonlar

`position` prop'u ipucunun hedefe göre hangi yönde açılacağını belirler:
`top`, `bottom`, `left`, `right`. Varsayılan gösterim olayı hover'dır —
butonların üzerine gelerek deneyin.

**Örnek — Dört pozisyon — butonların üzerine gelin:**

```tsx
<span id="tt-top" style={{ display: "inline-block" }}>
  <LivaButton text="Üst" variant="outlined" />
</span>
<LivaTooltip target="#tt-top" text="Üstte görünen ipucu" position="top" />

<span id="tt-bottom" style={{ display: "inline-block" }}>
  <LivaButton text="Alt" variant="outlined" />
</span>
<LivaTooltip target="#tt-bottom" text="Altta görünen ipucu" position="bottom" />

<span id="tt-left" style={{ display: "inline-block" }}>
  <LivaButton text="Sol" variant="outlined" />
</span>
<LivaTooltip target="#tt-left" text="Solda görünen ipucu" position="left" />

<span id="tt-right" style={{ display: "inline-block" }}>
  <LivaButton text="Sağ" variant="outlined" />
</span>
<LivaTooltip target="#tt-right" text="Sağda görünen ipucu" position="right" />
```

## Gecikme ve Olaylar

`showEvent` ve `hideEvent` ile tetikleyici olay ve gecikme süresi (ms)
özelleştirilir. Aşağıdaki örnek 500 ms bekledikten sonra açılır ve imleç
ayrıldığı anda kapanır.

**Örnek — Gecikme ve olaylar:**

```tsx
<span id="tt-delay" style={{ display: "inline-block" }}>
  <LivaButton text="Üzerime Gel" />
</span>
<LivaTooltip
  target="#tt-delay"
  text="Bu ipucu 500 ms gecikmeyle açılır, imleç ayrılınca hemen kapanır."
  position="bottom"
  width={260}
  showEvent={{ name: "mouseenter", delay: 500 }}
  hideEvent={{ name: "mouseleave", delay: 0 }}
/>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `text` | `string` | — (zorunlu) |
| `target` | `string` | — |
| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` |
| `width` | `number \| string` | `200` |
| `maxLines` | `number` | `3` |
| `showEvent` | `{ name: string; delay: number }` | `{ name: 'dxhoverstart', delay: 150 }` |
| `hideEvent` | `{ name: string; delay: number }` | `{ name: 'dxhoverend', delay: 150 }` |
| `children` | `ReactNode` | — |
| `className` | `string` | — |

`showEvent.name` için geçerli değerler: `dxhoverstart`, `dxclick`,
`dxfocusin`, `mouseenter`, `click`, `focus`; `hideEvent.name` için:
`dxhoverend`, `dxclick`, `dxfocusout`, `mouseleave`, `click`, `blur`.
Ayrıca DevExtreme `ITooltipOptions`'tan gelen prop'lar (ör. `contentRender`)
aynen aktarılır.