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.