Conditional popup text, onmouseover depending of the value in cell of a table. Html, javascript and css

Question

I have a table in html.

I want that when I mouse over a cell, it pop-ups a text. The text popped-up, should depend of the text inside of the cell.

Example of an html table:

City number Paris 1454 Madrid 1345 Roma 684

If I mouseover a City (Paris), it should pop-up the country (France).

I have seen partial solutions, ( https://www.w3schools.com/howto/howto_js_popup.asp https://www.w3schools.com/css/css_tooltip.asp ), but I don´t know how to solve the conditional part of the pop-up.

Thank you

Answer 1

I think that you need a hover

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

https://www.w3schools.com/tags/tag_abbr.asp

Answer 2

There is an easier way to have "hover-popups" in HTML. You can add a title property to set the text shown in the popup:

<td title="France">Paris</td>

You can also set this via JavaScript:

td.title = "France"

I don't know if that is what you're looking for, but if it is, it's easier that way

Answer 3

Static generated Table:-

 var list = [{ city: "Italy", country: "Rome" }, { city: "Belgium", country: "Brussels" }]; var statusCol = ""; var table = '<table><tr><th>City</th><th>Country</th></tr>'; var ID = 0; for (var i = 0; i < list.length; i++) { var row = "<tr class='staff-row' >"; row += '<td title=' + list[i].city + '>' + list[i].city + '</td>'; row += '<td title=' + list[i].country + '>' + list[i].country + '</td>' row += "</tr>" ID++; table += row; } table += '</table>'; $('#DisplayTable').html(table); $('#DisplayTable').tooltip({ 'show': true, 'selector': '.staff-row', 'placement': 'bottom', 'title': function(event) { var $this = $(this); var tds = $this.find('td'); return }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' /> <script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> Static Table:- <table class="popup"> <tr onclick="myFunction(event)"> <th title="City">City</th> <th title="Country">Country</th> </tr> <tr> <td title="Delhi">Delhi</td> <td title="India">India</td> </tr> <tr> <td title="Paris">Paris</td> <td title="France">France</td> </tr> </table><br /> Dynamic Table:- <div id="DisplayTable"></div>

Answer 4

Supposing a DOM like that :

<table>
  <thead>
    <tr>
      <th>City</th>
      <th scope="col">Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Paris </th>
      <td>1454</td>
    </tr>
    <tr>
      <th scope="row">Madrid</th>
      <td>1345</td>
    </tr>
    <tr>
      <th scope="row">Roma</th>
      <td>684</td>
    </tr>
  </tbody>
</table>

Assuming you have a JS code that show the popup on hover.

You can use the data attribute to set the country on each city cell:

<th scope="row" data-country="France">Paris</th>

And patch the JS code to use it:

const elts = document.getElementsByTagName('th');
for (let elt of elts) {
  elt.addEventListener("mouseover", (evt) => {
    const country = evt.target.getAttribute('data-country');
    yourPopupScript(country); // this trigger your popup, and you can write the country into
  });
}