LivaTooltip
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.
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.
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.
| 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.