Tooltip Styling? (Kick me in the right direction)

Question

I have this element:

 <span class="PSLONGEDITBOX" id="MTG_INSTR$1">
    <a href="WWW.WEBSITE.COM" target="_blank">LEROY JENKINS</a>
 </span>

And I want to add a tooltip that looks like this:

LEROY JENKINS
-------------
Age: 45
Location: USA

Where Leroy is maybe bold/slightly bigger (whatever, I can google the CSS for that). And I have variables ready called 'name' 'age' (the whole string) and 'location' (the whole string) already ready to be popped into a tooltip.

My issue is - to start, where the element is a reference to that whole element (mtg_..) do I just add in the text through a child node and then use CSS to style it? Can someone point me in the right direction because every guide is either too basic/does not have enough information or is way too complicated?

I am willing to do the work myself, I just am not sure where to start basically.

Answer 1

You can add an element to your existing element for the tooltip via javascript, using innerHTML. Then absolutely position the tooltip in this element and apply a combination of opacity and visibility with transform and special timing (thanks to @myfunkyside) to have the tooltip fade in from the bottom and appear over your element.

document.getElementById('MTG_INSTR$1').innerHTML += '<span class="tooltip">\
    <div class="title">LEROY JENKINS</div>\
    Age: 45<br>\
    Location: USA\
  </span>';

* {padding:0;margin:0;}
body {padding:100px 0 0 50px;}

.PSLONGEDITBOX {
  display: inline-block;
  position: relative;
}
.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: visibility 0s .25s, opacity .25s, transform .25s;
}
.PSLONGEDITBOX:hover .tooltip, .tooltip:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%,-100%);
  transition: visibility 0s, opacity .25s, transform .25s;
}
.tooltip .title {border-bottom:1px dashed black;}

<span class="PSLONGEDITBOX" id="MTG_INSTR$1">
  <a href="WWW.WEBSITE.COM" target="_blank">LEROY JENKINS</a>
</span>