Build a glossary - show CMS content as tooltip

Hi everyone!

I’m currently working on a Website that has a bunch of Texts with a lot of specific words that need additional explanation.
I’m looking for a way to show the Description to certain words as tooltip right above the Word in the Text.

So setup so far looks like this:
Collection lists A contains the texts (rich text field) with the words that need extra clarification
The second collection list contains the word + description.
For Example Word: Website , Info: “A Website is a Page on the Internet”.

Now the word Website will be in the long form Text of Collection List A. There is should be highlighted and when I hover it, I get a tooltip-like overlay with the information from collection list B.

I need this functionality on the Template-page of collection list A.

Now I’m not quite sure how to approach this best and was wondering if anyone had an idea.
So far I have a multi reference field in list A that references the words. Now I can display all contents of list B here but how can I get the individual items above the words?

Ideally, there was some custom code that would automatically detect words in list A that match entries in list B and create the tooltip automatically. However it would be okay to do it manually as well. Right now I just created a link to the entry in list B on the word.

I’m just fiddling around with it more now but if anyone has an idea or maybe even build something similar before, any help would be greatly appreciated!

Read Only Link for the test project:

thank you!