### File

`packages/components/directives/eui-tooltip/container/eui-tooltip-container.component.ts`

### Description

The EuiTooltipContainerComponent is responsible for rendering the tooltip content and applying the appropriate styles and animations based on the configuration provided by the euiTooltip directive. It uses Angular's animation system to show and hide the tooltip smoothly, and it computes CSS classes dynamically to reflect the tooltip's alignment and color settings. The component is designed to be lightweight and efficient, utilizing Angular's OnPush change detection strategy to minimize unnecessary re-renders. It serves as the visual container for the tooltip content, ensuring that it is displayed correctly according to the specified configuration.

This component is typically not used directly in templates. Instead, it is instantiated and managed by the euiTooltip directive, which provides the necessary configuration for displaying the tooltip. The tooltip content and appearance are controlled through the configuration object passed to the component, which includes properties such as content alignment and color class.

### Example

Example :

    <eui-tooltip-container [config]="tooltipConfig"></eui-tooltip-container>

In this example, `tooltipConfig` is an object that adheres to the `EuiTooltipInterface`, containing the necessary properties to configure the tooltip's content and appearance.

### Accessibility

- The tooltip should be associated with the element it describes using appropriate ARIA attributes (e.g., `aria-describedby`).
- Ensure that the tooltip content is concise and provides meaningful information to assistive technologies.
- The tooltip should be keyboard accessible, allowing users to trigger it using keyboard interactions (e.g., focus or hover).
- Consider the timing of tooltip display and hiding to ensure that it does not interfere with user interactions or cause confusion.

### Notes

- The component relies on the euiTooltip directive to provide the necessary configuration and manage its lifecycle.
- The animations for showing and hiding the tooltip are defined in the `showHide` animation, which should be implemented to achieve the desired visual effect.
- The CSS classes applied to the component are computed based on the configuration, allowing for flexible styling of the tooltip content.
- The component is designed to be reusable and adaptable to various tooltip configurations, making it a versatile part of the tooltip system in the application.

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-tooltip-container.component`
templateUrl | `eui-tooltip-container.component.html`

### Index

###### Inputs

- config

### Constructor

`constructor()`

### Inputs

config
Type : `EuiTooltipInterface`
Required : true
Configuration provided by euiTooltip directive at instantiation.

# results matching ""

# No results matching ""