javascript - How can I get a different hover event for each word of a sentence?

Question

I'm very inexperienced with JavaScript, so there may be a way to do this that I don't know about, if so please let me know. I'm trying to get separate hover events for each word in a sentence.

I'm currently displaying sentences on a website from an array.

for (i=0; i<sentences.length; i++){
    var sent = sentences[i].sentence_text;
    display_list += "<li class='text_sent'>" + sent + "</li>";
}

I want to be able to have a separate hover event for each word in each sentence, so I split sentences into an arrays.

for (i=0; i<sentences.length; i++){
    var sent = sentences[i].sentence_text;
    var text_array = sentence_text.split(" ");
    display_list += "<li class='text_sent'>" + text_array + "</li>";
}

I haven't gotten beyond this point because I don't want to display the array contents. If I do display the array it displays commas between each item of the array. What I want is for the sentence to continue looking like it did before it was split, but for each word to be separately accessible.

Is this possible?

If so, how can I get each word to have a separate mouse-over event? For example, how can I make it so that every time you hover over a word, a tool-tip box displays what number the word is in the sentence?

Edit: Had to fix code for clarity.

Answer 1

When you add a value to a string in JS, it automatically casts it to a string as well. The default string representation of an array is just the elements separated by commas, which is why you're getting what you're getting. In order to make each one different, you might want to map the array, which has syntax like this:

[1, 2, 3].map((n) => 2*n)  // gives [2, 4, 6]

If you map the array, you could format it to add the HTML tags around each word, for example like:

text_array.map((word) => "<span>" + word + "</span>").join(" ")

To make each of them have a separate mouse over event, you could just put that straight into the element you create, like this:

text_array.map((word, i) =>
    "<span onmouseover='console.log(" + i + ")'>" + word + "</span>"
).join(" ")

Alternatively, you might want to create elements in a more object-oriented way, using document.createElement. Then you can add listeners to them using their addEventListener method, and your code will be a lot easier to read. For tooltips in particular, you're better off just following a tutorial that is focused explicitly on how to make them. Javascript gives you a very clean API to modify html and css, so if you can hardcode it, it's a small step to be able to programmatically do it.

As a side note, the code in your question shouldn't work, because you never defined glossTxt inside the loop. As another side note, the capitalization scheme in js is lower camel case, so display_list should really be displayList.