Populate tooltip with JSON based on element data-tooltip value

Question

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).

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.

So for instance, below you will see I have 3 separate <div>'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.

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).

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?

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.

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 = $("<div class='tooltip'>test</div>")
    .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();
  }
);

div {
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill' data-tooltip="skill-one">Skill One</div>
<div class='trinket' data-tooltip="trinket-two">Trinket Two</div>
<div class='hero' data-tooltip="hero-three">Hero Vestal</div>

Answer 1

When using a data property in jQuery use the function data(name). In your case instead of $(this).attr('tooltip') --> $(this).data('tooltip'). You can also access the data object with attr but you need to use the full property name: $(this).attr('data-tooltip').

The above in retrospect is not the answer to the OP's question, but in light of the posted code relevant.

The real solution is this part:

var tooltipJSON = tooltipData[$(this).data("tooltip")];
var tooltipValues = [];

if (tooltipJSON) {
  $.each(tooltipJSON, function(key, value) {
    tooltipValues.push(key + ":" + value);
  });
}

It gets the correct object from the javascript object tooltipData using the data object. After that it uses $.each to iterate over all values putting them in a new array. After that use join to put the values into the tooltip.

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 tooltipJSON = tooltipData[$(this).data("tooltip")];
    var tooltipValues = [];
    
    if (tooltipJSON) {
      $.each(tooltipJSON, function(key, value) {
        tooltipValues.push(key + ":" + value);
      });
    }

    var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</div>")
      .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();
  }
);

divd {
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill' data-tooltip="skill-one">Skill One</div>
<div class='trinket' data-tooltip="trinket-two">Trinket Two</div>
<div class='hero' data-tooltip="hero-three">Hero Vestal</div>