Skip to content

hlm-tooltip does not support RTL direction #1260

@Oussemasahbeni

Description

@Oussemasahbeni

Please provide the environment you discovered this bug in.

"@spartan-ng/brain": "0.0.1-alpha.647",
"@angular/cdk": "21.2.0",
"@spartan-ng/cli": "0.0.1-alpha.647"

Which area/package is the issue in?

tooltip

Description

The hlm-tooltip component does not support RTL (right-to-left) layouts. The tooltip arrow and overlay position are incorrect when the document direction is set to rtl, and the tooltip does not reactively update when direction changes at runtime. Several issues were identified:

  • Arrow positioning — The arrow uses physical properties (-left-2.5, -right-2.5) instead of logical ones (-start-2.5, -end-2.5), causing it to appear on the wrong side in RTL.
  • Arrow rotation — The arrow rotation is not flipped in RTL, so it points in the wrong direction for left/right positions.
  • Overlay offset — offsetX in BRN_TOOLTIP_POSITIONS_MAP is always applied as a physical pixel value. CDK does not auto-negate it in RTL, so the tooltip gap appears on the wrong side.
  • Direction change not reactive — The overlay position strategy is built once in afterNextRender and never updated when the document direction changes at runtime.

Screenshots:
LTR Mode:
Image

RTL Mode:

Image

Also RTL mode but when the direction changed in runtime from LTR to RTL

Image

Proposed Fix:

  • Use logical classes (-start-2.5, -end-2.5) and rtl:rotate-* in tooltipPositionVariants
  • Negate offsetX for left/right positions when Directionality.value === 'rtl'
  • Subscribe to Directionality.change and call _updatePosition() + overlayRef.updatePosition() to reactively reposition the overlay (following the same pattern as Angular Material's MatTooltip)

Please provide the exception or error you saw


Other information

No response

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions