工具提示造型？ （踢我正确的方向）

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

Leroy可能大胆/略大（无论如何，我可以谷歌搜索CSS）。我有变量准备称为'name''age'（整个字符串）和'location'（整个字符串）已准备好弹出到工具提示中。

我的问题是 - 开始，其中element是对整个元素的引用（mtg_ ..）我只是通过子节点添加文本然后使用CSS来设置样式吗？有人能指出我正确的方向，因为每个指南都是太基本/不够的信息或太复杂的方式。

我愿意自己做这项工作，我只是不确定从哪里开始。

Answer 1

您可以使用opacity通过javascript为工具提示添加元素到现有元素。然后绝对将工具提示放在此元素中并应用visibility和transform与document.getElementById('MTG_INSTR$1').innerHTML += '<span class="tooltip">\ <div class="title">LEROY JENKINS</div>\ Age: 45<br>\ Location: USA\ </span>';的组合以及特殊时间（感谢@myfunkyside）使工具提示从底部淡入并显示超过你的元素。

* {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>

<ctrl-p>