title: How to Make Tooltip Appear on TD Hover Using JS or JQuery
body: <p>having troubles doing this, so thought I'd turn to old Stack to help me out. :) I have my Table already and I want a different Tooltip to appear for each TR when a User hovers over a TD... So say if a User hovers over the Apple name, description, or image I would like a tooltip to appear saying the link to Apple's website. </p>
  
  <p>Link to site: <a href="http://thetotempole.ca/javascriptproject2.html" rel="nofollow">www.thetotempole.ca</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Arrays&lt;/title&gt;
  
  &lt;style&gt;
  #apple2 { 
  
  #tbl img {
      -webkit-transition: -webkit-transform 0.5s ease;
            transition: transform 0.5s ease;
  }
  
  #tbl td:hover img {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  td {text-align: center;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;center&gt;&lt;table id="tbl" border="1"&gt;
           &lt;tr&gt;
              &lt;th&gt;Product Name&lt;/th&gt;
              &lt;th&gt;Product Description&lt;/th&gt;
              &lt;th&gt;Product Images&lt;/th&gt;
           &lt;/tr&gt;
    &lt;/table&gt;
  &lt;script&gt;
  var products = [
    {
      name: "Apple",
      description: "It might be fruit, or it might be an iPhone",
      imageUrl: "images/apple.jpg"
    }, {
      name: "Dell",
      description: "Buy this one online at dell.com",
      imageUrl: "images/dell.jpg"
    }, {
      name: "IBM",
      description: "If you want a mainframe they still have some",
      imageUrl: "images/ibm.jpg"
    }, {
      name: "Toshiba",
      description: "Get a discount through SAIT (maybe)",
      imageUrl: "images/toshiba.jpg"
    }, {
      name: "Atari",
      description: "Try a classic gaming machine",
      imageUrl: "images/atari.jpg"
    }, {
      name: "Commodore",
      description: "64k should be enough for anyone",
      imageUrl: "images/commodore.jpg"
    }
  ];
  
  var table = document.getElementById("tbl");
  products.forEach(function(product) {
    var row = document.createElement("tr");
    row.appendChild(createCell(product.name));
    row.appendChild(createCell(product.description));
    row.appendChild(createImageCell(product.imageUrl));
  
    table.appendChild(row);
  });
  
  function createCell(text) {
    var cell = document.createElement("td");
    cell.innerText = text;
    return cell;
  }
  
  function createImageCell(url) {
    var image = document.createElement("img");
    image.setAttribute("src", url);
  
    var cell = document.createElement("td");  
    cell.appendChild(image);
    return cell;
  }
  
  &lt;/script&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>