# EuiPopoverArrowPositionDirective

**Type:** directive

<p>Directive that positions an arrow element for a popover relative to its origin element.</p>
<p>This directive calculates and applies the appropriate positioning style to ensure
the arrow correctly points to the origin element regardless of the popover&#39;s position.
It adjusts arrow placement dynamically based on the position strategy (&#39;top&#39;, &#39;bottom&#39;,
&#39;left&#39;, or &#39;right&#39;) and the dimensions and position of the origin element.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;div class=&quot;popover-arrow&quot; [euiPopoverArrowPosition]=&quot;position$&quot;&gt;&lt;/div&gt;</code></pre></div><h3>In component</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">position$ = new BehaviorSubject&lt;[EuiPopoverPosition, DOMRect]&gt;([&#39;bottom&#39;, originRect]);

updatePosition(position: EuiPopoverPosition, rect: DOMRect) {
  this.position$.next([position, rect]);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Arrow is purely decorative and does not affect accessibility</li>
<li>Ensure arrow color has sufficient contrast with background</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically calculates arrow position based on origin element bounds</li>
<li>Handles edge cases where popover is near viewport boundaries</li>
<li>Used internally by EuiPopoverComponent</li>
</ul>


**Selector:** `[euiPopoverArrowPosition]`

**Standalone:** false

## Inputs

- **euiPopoverArrowPosition**: `Observable<unknown>` - <p>Observable that emits a tuple containing the popover position strategy
and the DOMRect of the origin element.</p>
<p>The directive uses this information to calculate the appropriate
position for the arrow element.</p>

