Tooltip - React
Tooltip
import { Tooltip } from '@idds/react';Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1 - Tooltip Sederhana
Section titled “Contoh 1 - Tooltip Sederhana”Penjelasan tooltip
Tooltip dengan teks yang lebih panjang didalamnya
Contoh 2 - Tooltip dengan Media
Section titled “Contoh 2 - Tooltip dengan Media”
This is a tooltip
Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.
Contoh 3 - Tooltip dengan Variasi Posisi
Section titled “Contoh 3 - Tooltip dengan Variasi Posisi”Tooltip top
Tooltip bottom
Tooltip left
Tooltip right
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | — | Yes | Elemen trigger yang akan menampilkan tooltip saat di-hover atau di-focus. |
variant? | 'basic' | 'light' | 'dark' | 'media' | 'custom' | 'basic' | No | Variant tooltip yang menentukan tampilan dan struktur konten. |
title? | string | ReactNode | — | No | Judul tooltip (untuk variant basic/light/dark/media). |
description? | string | ReactNode | — | No | Deskripsi tooltip (untuk variant light/dark/media). |
image? | string | ReactNode | — | No | Image/thumbnail untuk variant media. |
content? | ReactNode | — | No | Custom content untuk variant light/dark/media. User bisa memasukkan pagination, actions, atau konten apapun sesuai kebutuhan. |
customContent? | ReactNode | — | No | Custom content untuk variant custom. |
placement? | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom' | No | Posisi tooltip relatif terhadap trigger element. |
showArrow? | boolean | true | No | Apakah menampilkan arrow pada tooltip. |
className? | string | — | No | ClassName tambahan untuk tooltip container. |
enterDelay? | number | 0 | No | Delay sebelum tooltip muncul (ms). |
leaveDelay? | number | 0 | No | Delay sebelum tooltip hilang (ms). |
onClose? | () => void | — | No | Callback ketika close button diklik (untuk variant light/dark/media). |