Angular Tooltip Component Challenge

Create a reusable Angular tooltip component that displays helpful information when a user hovers over an element. This is a fundamental UI pattern that enhances user experience by providing context without cluttering the main interface.

Problem Description

You are tasked with building a flexible and accessible tooltip directive or component in Angular. This tooltip should appear when a user hovers over a specific target element and disappear when the hover ends. The content of the tooltip should be configurable.

Key Requirements:

• Trigger: The tooltip should be triggered by a mouse hover event (mouseenter and mouseleave) on a designated target element.
• Content: The tooltip should be able to display arbitrary content. This could be simple text or more complex HTML.
• Positioning: The tooltip should appear near the target element, ideally with some basic positioning logic (e.g., above, below, left, right). For this challenge, let's start with a simple implementation that defaults to appearing above the target.
• Styling: Provide basic CSS for the tooltip to make it visible and distinguishable. Allow for custom styling to be applied.
• Reusability: The solution should be implemented as a reusable Angular directive or component.

Expected Behavior:

1. When a user hovers over an element associated with the tooltip, the tooltip should appear.
2. When the user moves their mouse away from the element, the tooltip should disappear.
3. The tooltip's content should be clearly visible.
4. The tooltip should not obstruct the target element itself.

Edge Cases to Consider:

• Tooltips appearing at the edge of the viewport (consider how to prevent them from going off-screen).
• Rapid mouse movements over and away from the target element.
• Tooltips with very long content.

Examples

Example 1: Basic Text Tooltip

HTML Template:

<button appTooltip="This is a simple tooltip message.">Hover over me</button>

Expected Visual Output:

When hovering over the "Hover over me" button, a small box appears above it containing the text "This is a simple tooltip message.".

Explanation: The appTooltip directive intercepts the hover events and displays the provided text content.

Example 2: Tooltip with HTML Content

HTML Template:

<div appTooltip>
  Hover for details
  <div class="tooltip-content">
    <strong>Important!</strong><br>
    This is a more detailed message.
  </div>
</div>

Expected Visual Output:

When hovering over the "Hover for details" div, a tooltip appears above it. This tooltip contains bold text "Important!" and a new line with "This is a more detailed message.".

Explanation: The directive should be able to render HTML content provided within a specific structure or via an input.

Example 3: Positioning Consideration (Conceptual)

HTML Template:

<span appTooltip="Tooltip content" tooltipPosition="bottom">Hover me</span>

Expected Visual Output:

When hovering over the "Hover me" span, the tooltip appears below it, rather than the default above.

Explanation: While the core requirement is to implement a basic tooltip, consider how you might extend it to support different positioning strategies. For this challenge, focus on the default (above) or a simple "above/below" toggle.

Constraints

• The solution must be implemented using TypeScript and Angular.
• Avoid using external libraries for the tooltip functionality itself (you can use Angular's core modules).
• The tooltip should be performant, avoiding unnecessary DOM manipulations or event listener overhead.
• The solution should ideally be implemented as a directive for maximum reusability across different element types.

Notes

• Consider using Angular's HostListener to efficiently capture mouse events.
• You'll likely need to dynamically create and append/remove the tooltip element to the DOM.
• Think about how to manage the tooltip's visibility state.
• For positioning, you might need to access the target element's bounding rectangle (getBoundingClientRect()).
• Consider accessibility: how will users who don't use a mouse interact with this? (For this challenge, focus on hover. Advanced solutions might consider focus events.)