Skip to content

[Tooltip] Support ref as prop, fix type safety, and expose missing Radix props #648

@ravisuhag

Description

@ravisuhag

Summary

Tooltip wraps Radix UI's Tooltip primitive. Missing ref prop support, has type safety issues in placement utility, and several Radix props not forwarded.

Improvements

1. Accept ref as a prop

TooltipBase component doesn't accept a ref prop. Users cannot access underlying Radix Trigger/Content refs.

2. Fix type safety in getTransformForPlacement

transforms[side][align] is an unsafe index operation — align could be undefined but TypeScript doesn't catch it.

3. Expose missing Radix props

  • closeDelay — not exposed, can't customize close timing
  • align — computed from side prop instead of being directly configurable
  • Arrow size — hardcoded to width={7} height={7}, not customizable

4. Replace hardcoded CSS max-width: 400px

Cannot be customized without overriding styles. Should be a CSS custom property or prop.

5. Fix accessibility for non-string messages

When message is a ReactNode, no accessible label is set since aria-label falls back to undefined.

6. Fix trigger wrapper semantics

Trigger wraps children in a generic <div> with no semantic meaning, potentially conflicting with Radix's internal accessibility handling.

7. Consider Base UI migration

Component uses Radix UI while the project is migrating to Base UI. Tooltip is available in Base UI.

Files

  • packages/raystack/raystack/components/tooltip/

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions