คอมโพเนนต์ทั้งหมด
Tooltip
คำอธิบายสั้นของไอคอนหรือคำศัพท์
ui/overlay.tsxClient componentใช้งาน
แสดงเมื่อชี้หรือโฟกัส ซ่อนด้วย Esc ผูกกับปุ่มด้วย aria-describedby
บันทึกไว้ดูทีหลังคัดลอกลิงก์แชร์ให้เพื่อน
<Tooltip content="บันทึกไว้ดูทีหลัง">
<Button iconOnly variant="ghost" aria-label="บันทึก"><BookmarkSimple /></Button>
</Tooltip>Props
| Prop | Type | Default | คำอธิบาย |
|---|---|---|---|
content | ReactNode | - | ข้อความสั้น ไม่มีลิงก์หรือปุ่ม |
side | "top" | "bottom" | "top" | ตำแหน่ง |
children | ReactElement | - | ตัวที่โฟกัสได้หนึ่งตัว |
ใช้เมื่อไร
ควรทำ
- อธิบายปุ่มไอคอน
- สั้นไม่เกินหนึ่งบรรทัด
ไม่ควรทำ
- ซ่อนข้อมูลที่จำเป็นไว้ใน tooltip
- ใส่กับข้อความที่อ่านได้อยู่แล้ว