title: Populate tooltip with JSON based on element data-tooltip value
body: <p>Just looking for some advice or documentation on the following if possible(not looking for someone to do this for me, I just can't seem to find anything pertinent to what I want to do). </p>
  
  <p>I want to populate a tooltip popup with data based on the hovered elements data-tooltip value. I've found how to populate tooltips with JSON, but not how to check the element first for a common value and search the JSON for that same value and THEN populate the tooltip. </p>
  
  <p>So for instance, below you will see I have 3 separate <code>&lt;div&gt;</code>'s with different data-tooltip values. What I would like to do is when hovered, the tooltip would then populate with JSON from the json object named the same as the data-tooltip value. </p>
  
  <p>To be clear, I understand HOW to populate divs with JSON data, but I don't know how to search JSON data based on data within the element(such as the elements data-tooltip value). </p>
  
  <p>ex. If elements data-tooltip value = "skill-one", how can I then populate the tooltip with the JSON from the "skill-one" object? Or how can I write the JS to compare the two? </p>
  
  <p>Any help would be greatly appreciated, I'm looking to learn how to do this not looking for someone to do this for me. I've been researching for hours and haven't gotten very far. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>tooltipData = {
      "skill-one": {
          "value1":"skill-one value1",
          "value2":"skill-one value2",
          "value3":"skill-one value3"
      },
      "trinket-two": {
          "value1":"trinket-two value1",
          "value2":"trinket-two value2",
          "value3":"trinket-two value3"
      },
   }
  
  $('.skill, .trinket, .hero').hover(
    function() { 
      console.log( 'hovering on' , $(this).attr('tooltip') ); 
  
      var tooltip = $("&lt;div class='tooltip'&gt;test&lt;/div&gt;")
      .css({
        'color': '#fff',
        'position': 'absolute',
        'zIndex': '99999',
        'width': '100px',
        'height': '150px',
        'background-color': '#333',
      });
      $(this).append(tooltip);
      $(document).on('mousemove', function(e){
        $('.tooltip').css({
          left:  e.pageX+10,
          top:   e.pageY-10
        });
      });
    },
    function() {
     $('.tooltip').remove();
    }
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 100px;
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='skill' data-tooltip="skill-one"&gt;Skill One&lt;/div&gt;
  &lt;div class='trinket' data-tooltip="trinket-two"&gt;Trinket Two&lt;/div&gt;
  &lt;div class='hero' data-tooltip="hero-three"&gt;Hero Vestal&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>