ツールチップのスタイル設定？私は、この要素持っ

Question

（正しい方向に私をキック）：

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

をそして、私はこのようになりますツールチップを追加したい：

リロイは大きめ/多分大胆で

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

（どんなものであれ、私はそれのためのCSSをGoogleにすることができます）。そして、私は、変数 '名前' '年齢'（全体の文字列）と '位置'（全体の文字列）は既にツールチップにポップする準備ができている準備ができています。

私の問題は、要素がその要素全体（mtg_ ..）への参照であるところです。私はちょうど子ノードを通してテキストを追加し、CSSを使ってそれをスタイルするのですか？誰かが正しい方向に向けることができますか？すべてのガイドがあまりにも基本的すぎる/十分ではない情報や方法が複雑すぎるためです。

私は自分自身で作業をしたいと思っています。基本的にどこから始めるべきか分かりません。

Answer 1

innerHTMLを使用して、javascriptを使用してツールチップの既存の要素に要素を追加できます。次に、この要素にツールチップを配置して、transformととの組み合わせを適用し、ツールチップを下からフェードインして要素上に表示させる特別なタイミング（@myfunkysideのおかげで）を適用します。

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>