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' (whole string) already ready to be popped into a tooltip.

My issue is - to start, where 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/not enough information or wayyyy 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>