Solution 1 :

To get the effect you want, you will need to also wrap each word in a span, not just the tooltip/image. Something like this:

var json = {
"parameter1": {'Anyway': 0.822, 'if': 0.91, 'you': 0.53, "don't": 0.9, 'agree': 0.53},
"parameter2": {'Anyway': 0.1322, 'if': 0.4001, 'you': 0.523, "don't": 0.509, 'agree': 0.201},
"parameter3": {'Anyway': 0.822, 'if': 0.101, 'you': 0.423, "don't": 0.225, 'agree': 0.61},
"parameter4": {'Anyway': 0.72, 'if': 0.201, 'you': 0.603, "don't": 0.869, 'agree': 0.99},
"parameter3_text": {'Anyway': "description1", 'if': "description2", 'you': "description3", "don't": "description4", 'agree': "description5"}
}

let words = Object.keys(json.parameter3_text);
const spans = [];
const paragraph = document.querySelector("#p3");
for(var x = 0; x < words.length; x++) {

            var span = "<span class='word'>" + Object.keys(json.parameter3_text)[x] + "<span class='tooltiptext'>" + Object.values(json.parameter3_text)[x] + "</span></span>"
            
            spans.push(span);
        }

        // setting colored spans as paragraph HTML
        paragraph.innerHTML = spans.join(" ");
.parameter3 {
  position: relative;
}

.parameter3 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: #000;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  border: solid;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.word:hover .tooltiptext {
  visibility: visible;
  top: 30px;
  left: 20px;
}
<div class="parameter3">
  <p id="p3"><span>Anyway if you don't agree</span></p>
</div>

Solution 2 :

I was able to achieve what you require by structuring the markup as follows:

<p><span class="word">Anyway<span class="tooltip">0.822</span></span>...</p>

Where there is an outer span for each word than contains an inner span for the tooltip associated with that word.

Check out the demo below:

const sentences = [
  { 'Anyway': 0.822, 'if': 0.91, 'you': 0.53, "don't": 0.9, 'agree': 0.53 },
  {'Anyway': 0.1322, 'if': 0.4001, 'you': 0.523, "don't": 0.509, 'agree': 0.201},
  {'Anyway': 0.822, 'if': 0.101, 'you': 0.423, "don't": 0.225, 'agree': 0.61},
  {'Anyway': 0.72, 'if': 0.201, 'you': 0.603, "don't": 0.869, 'agree': 0.99},
  {'Anyway': "description1", 'if': "description2", 'you': "description3", "don't": "description4", 'agree': "description5"}
]
 
 const app = document.getElementById('app')
 
 sentences.forEach(sentence => {
  app.innerHTML += '<p>'
  Object.keys(sentence).forEach(word => {
     app.innerHTML += `<span class="word">${word}<span class="tooltip">${sentence[word]}</span></span> `
  })
  app.innerHTML += '</p>'
 })
.word {
  position: relative;
}

.tooltip {
  background-color: #eee;
  position: absolute;
  bottom: 100%;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.word:hover .tooltip {
 opacity: 1;
}
<div id="app"></div>

Problem :

I am trying to display a different description / image while hovering over each word in a paragraph in HTML. However, it seems like only the last element is retrieved and displayed over the entire paragraph as a whole. Does anyone know a solution to this problem?

To make things simpler, I have only included my code for displaying text descriptions below. I also omitted chunks of code that may not be essential to solving this issue. If there is anything unclear, please let me know! Thank you.

JSON data:

    var json = {
"parameter1": {'Anyway': 0.822, 'if': 0.91, 'you': 0.53, "don't": 0.9, 'agree': 0.53}
"parameter2": {'Anyway': 0.1322, 'if': 0.4001, 'you': 0.523, "don't": 0.509, 'agree': 0.201},
"parameter3": {'Anyway': 0.822, 'if': 0.101, 'you': 0.423, "don't": 0.225, 'agree': 0.61},
"parameter4": {'Anyway': 0.72, 'if': 0.201, 'you': 0.603, "don't": 0.869, 'agree': 0.99},
"parameter3_text": {'Anyway': "description1", 'if': "description2", 'you': "description3", "don't": "description4", 'agree': "description5"}

}

Part of a switch statement (other parameters omitted):

    case "parameter3":
        for(var x = 0; x < words.length; x++) {

            var span = "<span class='tooltiptext'>" + json.parameter3_text[Object.keys(json.parameter3_text)[x]] + "</span>"
            
            spans.push(span);
        }

        // setting colored spans as paragraph HTML
        paragraph.innerHTML = spans.join(" ");
        break;

HTML code

<div class="parameter3">
    <p id=p3><span>Anyway if you don't agree</span></p>
</div>

CSS code

.parameter3 {
  position: relative;
}

.parameter3 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: #000;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  border: solid;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.parameter3:hover .tooltiptext {
  visibility: visible;
  top: 30px;
  left: 20px;
}

Comments

Comment posted by Gerardo Furtado

“I am trying to display a different description / image while hovering over each word in a paragraph in HTML”

Comment posted by Learning4ever

Ah I see. Thank you so much. How would I be able to use event listeners to display different text / image? If I use

By

Leave a Reply

Your email address will not be published. Required fields are marked *