# EuiTooltipDirective

**Type:** directive

<p>Directive for displaying contextual information in a tooltip overlay on hover or focus.
Provides semantic color variants and flexible positioning relative to the trigger element.
Automatically handles show/hide behavior with configurable delays and keyboard dismissal.
Built on Angular CDK Overlay for robust positioning and scroll handling.</p>
<p>Basic tooltip:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiTooltip=&quot;Save your changes&quot;&gt;Save&lt;/button&gt;</code></pre></div><p>Tooltip with position and variant:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;span euiTooltip=&quot;Error occurred&quot; position=&quot;below&quot; euiTooltipDanger&gt;!&lt;/span&gt;</code></pre></div><p>Tooltip with delays:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;a euiTooltip=&quot;Click for details&quot; [showDelay]=&quot;500&quot; [hideDelay]=&quot;200&quot;&gt;Info&lt;/a&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Tooltip appears on both hover and keyboard focus for screen reader compatibility</li>
<li>Press Escape key to dismiss tooltip</li>
<li>Ensure tooltip content is non-essential as it may not be announced by all screen readers</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Tooltip content should be brief and contextual</li>
<li>Use semantic variants (euiTooltipDanger, euiTooltipWarning) to convey meaning</li>
<li>Position automatically adjusts if space is insufficient (fallback positioning)</li>
<li>Tooltip is disabled when isDisabled is true or tooltipContent is empty</li>
</ul>


**Selector:** `[euiTooltip]`

**Standalone:** false

## Inputs

- **contentAlignment**: `"left" | "right" | "center" | "justify"` - <p>Sets the alignment of the content in the tooltip.</p>

- **e2eAttr**: `string` - <p>Sets the <code>data-e2e</code> attribute for the host element.</p>

- **euiTooltip**: `string` - <p>Tooltip content.</p>

- **euiTooltipAccent**: `boolean` - <p>Whether the tooltip has Accent state.</p>

- **euiTooltipDanger**: `boolean` - <p>Whether the tooltip has a Danger state.</p>

- **euiTooltipInfo**: `boolean` - <p>Whether the tooltip has Info state.</p>

- **euiTooltipPrimary**: `boolean` - <p>Whether the tooltip has a Primary state.</p>

- **euiTooltipSecondary**: `boolean` - <p>Whether the tooltip has a Secondary state.</p>

- **euiTooltipSuccess**: `boolean` - <p>Whether the tooltip has a Success state.</p>

- **euiTooltipWarning**: `boolean` - <p>Whether the tooltip has a Warning state.</p>

- **hideDelay**: `number` - <p>Sets the delay for the tooltip to be hidden</p>

- **isDisabled**: `boolean` - <p>Whether the tooltip is disabled.</p>

- **position**: `"left" | "right" | "above" | "below" | "before" | "after" | string` - <p>Sets the position of the tooltip relative to its trigger element.</p>

- **showDelay**: `number` - <p>Sets the delay for the tooltip to be visible.</p>

