after one word is clicked then popup explains it, changes text color to red onmouseover, then changes color back to black onmouseout

I use this script below to change the color for every single word when mouse over that word, and changes back to black when mouse out of that word, and works great. Also, If user want to hear the pronunciation then can click on the word to play the sound, which works great.

There are huge number of words on the text, and for every single word different explanations/popups.

But where im stuck is that i like to add popup over every word onmouseover, and to show explanation for that word only.

I like how it works on html <p title=”Explanation”>word-1</p> but using js i found difficult to implement.
Also i found an example using css which i like it, but difficult to combine with js.

<script>
function playAudio(url) {
new Audio(url).play();
}
</script>

<p>
<font size=”6″ style=”font-weight:bold;” onmouseover=”this.style.color=’red’;” onmouseout=”this.style.color=’black’;” onclick=”playAudio(‘audio-1.mp3′)”>first-word</font>

<font size=”6″ style=”font-weight:bold;” onmouseover=”this.style.color=’red’;” onmouseout=”this.style.color=’black’;” onclick=”playAudio(‘audio-2.mp3′)”>second-word</font>

<font size=”6″ style=”font-weight:bold;” onmouseover=”this.style.color=’red’;” onmouseout=”this.style.color=’black’;” onclick=”playAudio(‘audio-3.mp3’)”>third-word</font>
</p>