Angular Tooltip Component

This challenge asks you to build a reusable tooltip component in Angular. Tooltips are small, contextual pop-up boxes that appear when a user hovers over an element, providing additional information. Implementing a robust and customizable tooltip component is a common requirement in many Angular applications.

Problem Description

You need to create an Angular component called Tooltip that displays a tooltip message when the host element is hovered over. The component should be configurable via @Input() properties to control the tooltip text, position, and appearance. The tooltip should disappear when the mouse leaves the host element or the tooltip area itself.

Key Requirements:

• tooltipText Input: A string input property that determines the text displayed in the tooltip.
• tooltipPosition Input: An input property that controls the position of the tooltip relative to the host element. Acceptable values are: 'top', 'bottom', 'left', 'right'. Default to 'top'.
• Visibility Control: The tooltip should be visible only when the mouse is hovering over the host element or the tooltip itself.
• Dynamic Positioning: The tooltip's position should be calculated dynamically based on the tooltipPosition input and the size of the host element to avoid being cut off by the viewport.
• CSS Styling: The tooltip should have basic styling (background color, text color, padding, border-radius) to make it visually appealing. You can use CSS classes for styling.
• Reusability: The component should be easily reusable in different parts of an Angular application.

Expected Behavior:

1. When the mouse enters the host element, the tooltip should appear.
2. The tooltip's position should be determined by the tooltipPosition input.
3. When the mouse leaves the host element or the tooltip area, the tooltip should disappear.
4. The tooltip text should be the value of the tooltipText input.
5. The tooltip should be styled appropriately.

Edge Cases to Consider:

• Tooltip Overflow: Handle cases where the tooltip text is too long to fit within the available space. Consider truncating the text or adding scrollbars (though truncation is preferred for this challenge).
• Viewport Boundaries: Ensure the tooltip doesn't extend beyond the viewport boundaries. If it does, adjust its position accordingly.
• Host Element Size: The tooltip positioning should adapt to different host element sizes.
• No Tooltip Text: Handle the case where tooltipText is empty or null gracefully (e.g., don't display anything).

Examples

Example 1:

Input:
<app-tooltip tooltipText="This is a simple tooltip" tooltipPosition="bottom"></app-tooltip>

Output:
A tooltip appears below the host element displaying "This is a simple tooltip".

Explanation: The tooltip is positioned below the host element and displays the provided text.

Example 2:

Input:
<app-tooltip tooltipText="A longer tooltip message that might need to be truncated." tooltipPosition="right"></app-tooltip>

Output:
A tooltip appears to the right of the host element displaying a truncated version of the message if it overflows.

Explanation: The tooltip is positioned to the right. If the text is too long, it's truncated to fit within the tooltip's container.

Example 3:

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

Output:
No tooltip is displayed.

Explanation:  Since the tooltipText is empty, the component doesn't render the tooltip.

Constraints

• Angular Version: Use Angular version 14 or higher.
• Styling: Use CSS classes for styling. Avoid inline styles.
• Performance: The component should be performant and not introduce any noticeable lag. Avoid unnecessary DOM manipulations.
• Input Validation: The tooltipPosition input should be validated to ensure it accepts only valid values ('top', 'bottom', 'left', 'right'). If an invalid value is provided, default to 'top'.
• Tooltip Size: The tooltip should have a maximum width of 200px.

Notes

• Consider using Angular's Renderer2 for DOM manipulations to ensure compatibility across different platforms.
• Use @HostListener to listen for mouse events on the host element.
• Think about how to dynamically calculate the tooltip's position based on the host element's size and the viewport boundaries.
• You can use a simple CSS framework like Bootstrap or Angular Material for styling, but it's not required. Focus on the core functionality of the tooltip component.
• The goal is to create a clean, reusable, and well-documented component.