Frontend: Implement Reusable Tooltip Component

[p3ris0n]

Category: Frontend Development

Objective: Create a standardized, accessible Tooltip component for the UI library.

Detailed Description: The bc-forge dashboard requires a consistent UI. Implement a reusable Tooltip React component that adheres to our design system. It should support various sizes, variants, and include proper ARIA attributes.

Acceptance Criteria:

• Component accepts standard HTML props alongside custom variant props.
• Must be fully accessible (a11y) with keyboard navigation support.
• Include Storybook or equivalent isolated component documentation.

Technical Requirements: React, TypeScript, Tailwind CSS (if used) or Vanilla CSS, @bc-forge/react

Deliverables:

• Source code for Tooltip.tsx
• Unit tests for the component
• Documentation of props

Testing Requirements:

• Render component with various prop combinations.
• Test accessibility using screen readers or axe-core.
• Run unit test suite.

Estimated Difficulty: Beginner

Points: 200

[Rufai-Ahmed]

@Rufai-Ahmed has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, I'd like to work on this.
My approach: build Tooltip.tsx as a hover/focus-triggered popover, positioned relative to its trigger with a simple placement prop (top/bottom/left/right) and collision handling at viewport edges. I'll use aria-describedby linking the trigger to the tooltip content, show it on both hover and keyboard focus (not just mouse), and dismiss on Escape or blur so it doesn't trap keyboard users. I'll follow the same inline-styles, ref-forwarding, dependency-free pattern I used for Badge/Alert/Pagination in #353, write unit tests for the prop combinations and interaction states, run axe-core, and add a Storybook story.
Proof: same stack as the components already merged in #353 (React/TypeScript, accessible UI components). GitHub: github.com/Rufai-Ahmed
ETA: 1-2 hours.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Rufai-Ahmed to this issue.

[drips-wave]

Congratulations, @Rufai-Ahmed! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @Rufai-Ahmed: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[p3ris0n]

@Rufai-Ahmed You have 36 hours to resolve this issue or it will be assigned to someone else, thanks for contributing!

[Rufai-Ahmed]

Hey @p3ris0n , thanks for the heads up. This one is already done. PR #353 is open and linked to this issue (the description has Closes #230, so it shows under Development and will auto-close the issue when merged). It adds the reusable Tooltip component (accessible: opens on hover and keyboard focus, uses role="tooltip" with aria-describedby, and dismisses on Escape) along with the other @bc-forge/react components, all covered by passing unit tests. Ready for review whenever you get a chance.

[Rufai-Ahmed]

#353

Here's the pull request I made @p3ris0n

[drips-wave]

This issue has been completed by @Rufai-Ahmed as part of the Stellar Wave Program's 6th Wave 🥳

😎 @Rufai-Ahmed: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.