Angular Hover Information Component

Develop a reusable Angular component that displays contextual information when a user hovers over a specific element. This component should enhance user experience by providing tooltips or popovers with additional details on demand.

Problem Description

Your task is to create an Angular component that acts as a flexible "hover info" provider. This component will wrap around any target element (like text, an icon, or a button) and display a supplementary information box (tooltip or popover) when the user's mouse pointer hovers over the target.

Key Requirements:

• Target Element Integration: The component must be able to wrap around arbitrary HTML elements.
• Information Display: It needs to accept content to display within the hover information box. This content could be plain text, HTML, or even another Angular component.
• Triggering Mechanism: The hover information should appear when the mouse enters the target element and disappear when the mouse leaves.
• Styling Flexibility: The component should allow for some basic customization of the hover information's appearance, though a default style should be provided.
• Reusability: The component should be designed to be used across an Angular application.

Expected Behavior:

1. When a user hovers over the element wrapped by the hover info component, a small box containing the provided information should appear near the mouse pointer or the target element.
2. When the user moves the mouse away from the target element, the information box should smoothly disappear.

Edge Cases to Consider:

• What happens if the hover information content is very long? The UI should remain usable without significant overflow issues.
• How does the component behave if it's placed near the edge of the viewport? The hover box should ideally adjust its position to remain visible.

Examples

Example 1: Basic Text Hover Info

<!-- In your parent component's template -->
<app-hover-info message="This is some helpful tooltip text.">
  <button>Hover over me</button>
</app-hover-info>

Output: When hovering over the "Hover over me" button, a tooltip appears displaying "This is some helpful tooltip text.".

Explanation: The app-hover-info component wraps the <button> element. The message input property provides the text for the tooltip.

Example 2: HTML Content Hover Info

<!-- In your parent component's template -->
<app-hover-info>
  <span class="info-icon">?</span>
  <ng-template #hoverContent>
    <strong>Important Note:</strong>
    <p>Please review the <em>attached document</em> before proceeding.</p>
  </ng-template>
</app-hover-info>

Output: When hovering over the "?" icon, a tooltip appears displaying the formatted HTML content: "Important Note:" followed by a paragraph.

Explanation: This example demonstrates passing more complex HTML content using ng-template. The app-hover-info component would need a way to accept template references or projected content.

Example 3: Hover Info near the Edge

Imagine a target element near the right edge of the screen. If the tooltip defaults to appearing to the right, it might go off-screen.

Output: The hover information box should ideally shift its position (e.g., appear to the left of the target) to remain fully visible within the viewport.

Constraints

• The solution must be implemented using Angular and TypeScript.
• The component should be stateless and receive its configuration via Input properties.
• Consider basic accessibility implications for hover interactions (e.g., ensuring it's keyboard accessible if possible, though focus is on mouse hover for this challenge).
• Avoid external libraries for the core tooltip functionality.

Notes

• Think about how you'll handle the positioning of the hover information. Will it be relative to the target element, or the mouse cursor?
• Consider using Angular's directive pattern or a component pattern. A component is generally more suitable for encapsulating the HTML and logic of the hover box itself.
• You'll need to manage the visibility of the hover information using event listeners for mouseenter and mouseleave on the host element.
• For displaying rich HTML content, consider using ng-content for content projection or a dedicated input for HTML strings.
• For advanced positioning that adapts to viewport edges, you might need to leverage browser getBoundingClientRect() and some JavaScript logic.