Tengo plantillas de cadenas de usuarios que se parecen a esto,

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

Los números hacen referencia a otras publicaciones. Uso expresiones regulares y convierto el comentario en algo como esto:

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

Lo que estoy tratando de hacer es que cuando pasen el mouse sobre el número de la publicación, aparecerá una ventana emergente sobre el mouse que muestra la publicación a la que hace referencia la etiqueta. Tengo un componente <Post /> pero estoy 100% perdido sobre adónde ir desde aquí...

Puedo obtener una lista de las etiquetas <a> yendo

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

y eso me da una HTMLCollection sobre la que puedo iterar para dar detectores de eventos a cada uno, así:

 [...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);

Esto funciona, pero no estoy seguro de cómo puedo usar el componente <Post /> aquí, o si tendría que crear completamente otra plantilla html. Intenté preguntar esta vez con todo lo que estoy tratando de lograr, pero Todavía no estoy 100% seguro de lo que me confunde... tal vez alguien tenga sugerencias...

Como puede ver, los elementos están incrustados dentro del comentario de los usuarios, por lo que no puedo simplemente reemplazarlo todo.