title: Tooltip showing hidden values in table format on hover
body: <p>My site is set up in the following way:</p>
  
  <p>4 user groups. Each user group can see different information. An example would be stock quantity for a store. So the user from London can't see the stock availability for Manchester. This information is taken from the database for EACH item in stock. So if you have a list of 20 items, their individual values will be displayed.</p>
  
  <p>I would like to do the following: </p>
  
  <p>If I, or anyone I give permission to, hovers over the "In Stock" column for their own store, a tooltip table must appear showing the current stock levels for the 3 other stores, for each individual product. So if I hover over item SKU-001, I will <strong>only</strong> see the stock availability for that item. I had an issue where it was displaying the whole list for each item. </p>
  
  <p>I was thinking of this: </p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Store1&gt;&lt;/th&gt;
  &lt;th&gt;Store2&gt;&lt;/th&gt;
  &lt;th&gt;Store3&gt;&lt;/th&gt;
  &lt;th&gt;Store4&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;?php foreach($this-&gt;products as $product) { ?&gt;
  &lt;tr&gt;
  &lt;td id="stock1" title="myFunction"&gt;Stock of Item 1st store&lt;/td&gt; *If I hover/mouseover here, another table must appear showing only store name and values of "#stock2, #stock3 and #stock4* for the stock item I am hovering on.
  &lt;td id="stock2"&gt;Stock of Item 2nd store&lt;/td&gt;
  &lt;td id="stock3"&gt;Stock of Item 3rd store&lt;/td&gt;
  &lt;td id="stock4"&gt;Stock of Item 4th store&lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php } ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is some code I wrote:</p>
  
  <pre><code>function myFunction() {
  var x = document.createElement("TABLE");
  x.setAttribute("id", "table10");
  document.body.appendChild(x);
  
  var y = document.createElement("TR");
  y.setAttribute("id", "myTr");
  document.getElementById("myTable").appendChild(y);
  
  var z = document.createElement("TD");
  var t = document.getElementByID("riyadhbalance").value();
  z.appendChild(t);
  document.getElementById("myTr").appendChild(z);
  </code></pre>
  
  <p>However, for some reason this is not working. I have not found a way to include a tooltip. All the stock values are there for each individual item, so I just need to find a way to add the 3 values for the other stores and display them in a table format via a tooltip. That would be ideal. </p>
  
  <p>So basically the tooltip should show the 3 values of the stores which are currently not on display, as the other 3 values are hidden. The user can only see their store's stock levels. But I would like to include this for myself as it would make it easier to view stock levels across the board.</p>