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>
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>
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;
}
Ah I see. Thank you so much. How would I be able to use event listeners to display different text / image? If I use
