Component
Tooltip
Display additional information on hover. Use for explaining icons and providing context.
tsx
import { Tooltip, InfoTooltip } from 'wss3-forge'Usage
•
Use for non-essential supplementary information
•
Keep content short and focused
•
InfoTooltip adds a ? icon with tooltip
•
Adjust position to avoid overflow
Examples
Different Positions
tsx
1<HStack gap="lg">2 <Tooltip content="Top tooltip" position="top">3 <Button variant="secondary">Top</Button>4 </Tooltip>5 <Tooltip content="Bottom tooltip" position="bottom">6 <Button variant="secondary">Bottom</Button>7 </Tooltip>8 <Tooltip content="Left tooltip" position="left">9 <Button variant="secondary">Left</Button>10 </Tooltip>11 <Tooltip content="Right tooltip" position="right">12 <Button variant="secondary">Right</Button>13 </Tooltip>14</HStack>On Icons
tsx
1<HStack gap="md">2 <Tooltip content="Edit item">3 <IconButton icon={<Edit20Regular />} />4 </Tooltip>5 <Tooltip content="Delete item">6 <IconButton icon={<Delete20Regular />} variant="danger" />7 </Tooltip>8 <Tooltip content="Share">9 <IconButton icon={<Share20Regular />} />10 </Tooltip>11</HStack>Previous
Sheet
Next
Accordion
Last updated: December 2025