File

packages/components/eui-popover/directives/eui-popover-arrow-position.directive.ts

Description

Directive that positions an arrow element for a popover relative to its origin element.

This directive calculates and applies the appropriate positioning style to ensure the arrow correctly points to the origin element regardless of the popover's position. It adjusts arrow placement dynamically based on the position strategy ('top', 'bottom', 'left', or 'right') and the dimensions and position of the origin element.

Basic usage

<div class="popover-arrow" [euiPopoverArrowPosition]="position$"></div>

In component

position$ = new BehaviorSubject<[EuiPopoverPosition, DOMRect]>(['bottom', originRect]);

updatePosition(position: EuiPopoverPosition, rect: DOMRect) {
  this.position$.next([position, rect]);
}

Accessibility

• Arrow is purely decorative and does not affect accessibility
• Ensure arrow color has sufficient contrast with background

Notes

• Automatically calculates arrow position based on origin element bounds
• Handles edge cases where popover is near viewport boundaries
• Used internally by EuiPopoverComponent

Implements

OnInit OnDestroy