How to achieve text overlay with hover and variable highlighting in an input field?

I'm working on an Angular project where I need to overlay highlighted text within an input field. Specifically, I want to:

1. Highlight variables in the input, e.g., {{variableName}} should be visually distinct.
2. Display an overlay with additional information when hovering over the variable.
3. Still allow users to interact with the input (e.g., place the cursor, type text), even if the variable is highlighted and interactive.

I've implemented a directive to mirror the text of the input into a div positioned over the input field, with a span around the variable to highlight it. Here's what I'm struggling with:

• Handling mouse events: When I hover over the variable, I want to show an overlay. However, if I enable pointer-events on the overlay, it prevents the user from interacting with the input field itself (e.g., placing the cursor or typing).
• Event propagation: I need to capture mouseover events on the variables but allow other mouse events to propagate to the input field.

Continue reading...