I have string templates from users that looks something like this,

<div>hello this is a comment #344 funny #212 haha</div>

The numbers are referencing other posts. I use regex and turn the comment into something like this:

<div>hello this is a comment <a class="postlink>#344></a> funny <a classs="postlink">#212</a> haha<div>

What I am trying to do is when they hover over the post number, it will make a popup above their mouse showing the post that the tag is referencing. I have a <Post /> component but I am 100% lost on where to go from here..

I can get a list of the <a> tags by going

let quotes = document.getElementsByClassName('postlink');

and that gives me an HTMLCollection I can iterate over to give event listeners to each one, like this:

    [...quotes].forEach((q) => {
            q.addEventListener('mouseover', (e) => {
                console.log('mousing over q:', q);
            });
            q.addEventListener('mouseout', (e) => {
                console.log('mouse left q:', q);
            });
        });

        console.log(quotes);

This works, but I'm not sure how I can use the <Post /> component here, or if I would have to completely make another html template.. I tried asking this time with all of what I am trying to accomplish, but I'm still not even 100% sure what I'm confused about.. maybe someone has suggestions..

As you can see, the elements are embedded inside the users comment, so I cannot just replace the whole thing.