Angular Hover Tooltip Component

This challenge focuses on building a reusable Angular component that displays a tooltip (hover information) when a user hovers over a specified element. Creating such a component is a common requirement in many web applications for providing additional context or information without cluttering the main interface. This exercise will test your understanding of Angular component creation, event handling, and template rendering.

Problem Description

You are tasked with creating an Angular component called HoverTooltip that displays a tooltip message when the host element is hovered over. The component should accept an @Input() property called tooltipText which will contain the text to display in the tooltip. The tooltip should appear below the host element and disappear when the mouse leaves the host element.

Key Requirements:

• tooltipText Input: The component must accept a tooltipText input property (string type) to define the tooltip message.
• Hover State: The tooltip should only be visible when the mouse is hovering over the host element.
• Visibility Toggle: The tooltip's visibility should be controlled by an internal state variable.
• Positioning: The tooltip should be positioned directly below the host element. (For simplicity, assume the page has enough space for this positioning. No complex responsive adjustments are required).
• Styling: Basic styling is required to make the tooltip visible. A simple box with a border and background color is sufficient. (See "Examples" for styling guidance).
• Reusability: The component should be easily reusable in different parts of an Angular application.

Expected Behavior:

1. When the component is initialized, the tooltip should be hidden.
2. When the mouse pointer enters the host element, the mouseenter event should trigger, setting the tooltip visibility state to true.
3. When the mouse pointer leaves the host element, the mouseleave event should trigger, setting the tooltip visibility state to false.
4. The tooltip element should only be rendered in the DOM when the visibility state is true.
5. The tooltip element should display the value of the tooltipText input property.

Edge Cases to Consider:

• What happens if tooltipText is an empty string or null? (The tooltip should still be hidden, and no error should occur).
• How does the component behave if the host element is dynamically added or removed from the DOM? (The component should handle this gracefully).

Examples

Example 1:

Input:
<app-hover-tooltip tooltipText="This is a helpful tooltip!"></app-hover-tooltip>

Output:
(When hovering over the <app-hover-tooltip> element):
<div class="host-element"></div>
<div class="tooltip">This is a helpful tooltip!</div>

(When not hovering):
<div class="host-element"></div>

Explanation: The tooltip appears below the host element when hovered, displaying the provided text.

Example 2:

Input:
<app-hover-tooltip tooltipText=""></app-hover-tooltip>

Output:
(Always):
<div class="host-element"></div>

Explanation: Even with an empty tooltip text, the component renders the host element, but the tooltip remains hidden.

Constraints

• Angular Version: Angular 14 or higher.
• Styling: Use inline styles or a simple CSS class for basic tooltip styling. No external CSS frameworks (like Bootstrap) are allowed.
• Performance: The component should be performant and not introduce any noticeable delays or lag.
• Input Type: tooltipText must be a string.

Notes

• Consider using Angular's @Input() decorator to define the tooltipText property.
• Use Angular's event binding (mouseenter and mouseleave) to detect hover events.
• Use *ngIf to conditionally render the tooltip element based on the visibility state.
• Think about how to position the tooltip relative to the host element. For this challenge, a simple "below" positioning is sufficient.
• Focus on creating a clean, reusable, and well-structured Angular component.