Show image when hovering over individual words

Question

Show image when hovering over individual words

Is there a way to display different descriptions or images when hovering over each word in a paragraph using HTML? It seems that only the last element is being retrieved and displayed across the entire paragraph. Any suggestions on how to fix this issue would be greatly appreciated!

For simplicity, I've included just the code related to displaying text descriptions below, omitting any non-essential parts. If anything is unclear, please feel free to ask for clarification. Thank you for your help.

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;
}

javascript html css

Answer 1

Answer №1

In order to achieve the desired effect, you will have to wrap each word in a span element, not just the tooltip/image. Here is an example of how you can do this:

var data = {
"parameter1": {'Item': 0.822, 'if': 0.91, 'you': 0.53, "don't": 0.9, 'agree': 0.53},
"parameter2": {'Item': 0.1322, 'if': 0.4001, 'you': 0.523, "don't": 0.509, 'agree': 0.201},
"parameter3": {'Item': 0.822, 'if': 0.101, 'you': 0.423, "don't": 0.225, 'agree': 0.61},
"parameter4": {'Item': 0.72, 'if': 0.201, 'you': 0.603, "don't": 0.869, 'agree': 0.99},
"parameter3_text": {'Item': "desc1", 'if': "desc2", 'you': "desc3", "don't": "desc4", 'agree': "desc5"}
}

let items = Object.keys(data.parameter3_text);
const spans = [];
const para = document.querySelector("#para3");
for(var x = 0; x < items.length; x++) {

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

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

.parameter3 {
  position: relative;
}

.parameter3 .tooltip {
  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;
}

.item:hover .tooltip {
  visibility: visible;
  top: 30px;
  left: 20px;
}

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

Answer 2

In order to achieve the desired effect, you will have to wrap each word in a span element, not just the tooltip/image. Here is an example of how you can do this:

var data = {
"parameter1": {'Item': 0.822, 'if': 0.91, 'you': 0.53, "don't": 0.9, 'agree': 0.53},
"parameter2": {'Item': 0.1322, 'if': 0.4001, 'you': 0.523, "don't": 0.509, 'agree': 0.201},
"parameter3": {'Item': 0.822, 'if': 0.101, 'you': 0.423, "don't": 0.225, 'agree': 0.61},
"parameter4": {'Item': 0.72, 'if': 0.201, 'you': 0.603, "don't": 0.869, 'agree': 0.99},
"parameter3_text": {'Item': "desc1", 'if': "desc2", 'you': "desc3", "don't": "desc4", 'agree': "desc5"}
}

let items = Object.keys(data.parameter3_text);
const spans = [];
const para = document.querySelector("#para3");
for(var x = 0; x < items.length; x++) {

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

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

.parameter3 {
  position: relative;
}

.parameter3 .tooltip {
  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;
}

.item:hover .tooltip {
  visibility: visible;
  top: 30px;
  left: 20px;
}

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

Answer 3

Answer №2

I managed to fulfill your requirements by organizing the markup in the following manner:

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

Each word has an outer span that contains an inner span for the tooltip related to that word.

Feel free to explore the demo provided 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>

Answer 4

I managed to fulfill your requirements by organizing the markup in the following manner:

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

Each word has an outer span that contains an inner span for the tooltip related to that word.

Feel free to explore the demo provided 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>

Show image when hovering over individual words

Answer №1

Answer №2

Similar questions

Utilizing Selenium and BeautifulSoup to extract data from a website

Is there a way in WebStorm to create a "virtual" folder for conveniently organizing and hiding config files, or perhaps a feature that allows for easily toggling visibility of certain files?

Triggering Events with Angular Checkboxes

The error message "TypeError: Cannot read properties of undefined (reading 'prototype')" is encountered in Next.js 13 when trying to access the prototype of an

Is the callback still triggered even after the off function is called?

Can absolute positioning of an element impact the relative positioning of the element below it? What steps can be taken to

Can media queries styles be applied to a window of random size using JavaScript?

Trouble with Materialize CSS: Form elements displaying incorrectly

PHP and Ajax Form Submission Directing to Backend PHP Script

In CAKEPHP, emphasize a row in a Product table to indicate a comparison condition, without the need for hovering

What is the best way to retrieve the total number of nested objects within an object?

Extension Overlay for Chrome

Displaying a table in Chrome/Firefox with a mouseover feature

Styling Text with Shadow Effects in Mobile Web Browsers

Remove any unnecessary white space and new lines from the HTML code

Bootstrap sliders stagnant and unresponsive

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

Sorting the output with gulp and main-bower-files (gulp-order is not functioning)

Buttons for toggling D3 bubble chart display mode

How can I expand the notification pop-up in R Shiny?