คอมโพเนนต์ทั้งหมด

Tooltip

คำอธิบายสั้นของไอคอนหรือคำศัพท์

ui/overlay.tsxClient component

ใช้งาน

แสดงเมื่อชี้หรือโฟกัส ซ่อนด้วย Esc ผูกกับปุ่มด้วย aria-describedby
บันทึกไว้ดูทีหลังคัดลอกลิงก์แชร์ให้เพื่อน
tsx
<Tooltip content="บันทึกไว้ดูทีหลัง">
  <Button iconOnly variant="ghost" aria-label="บันทึก"><BookmarkSimple /></Button>
</Tooltip>

Props

PropTypeDefaultคำอธิบาย
contentReactNode-ข้อความสั้น ไม่มีลิงก์หรือปุ่ม
side"top" | "bottom""top"ตำแหน่ง
childrenReactElement-ตัวที่โฟกัสได้หนึ่งตัว

ใช้เมื่อไร

ควรทำ

  • อธิบายปุ่มไอคอน
  • สั้นไม่เกินหนึ่งบรรทัด

ไม่ควรทำ

  • ซ่อนข้อมูลที่จำเป็นไว้ใน tooltip
  • ใส่กับข้อความที่อ่านได้อยู่แล้ว