javascript - 工具提示样式？ (朝正确的方向踢我)

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 的粗体/稍大的地方(无论如何，我可以通过 google 搜索 CSS)。我已经准备好名为“名称”、“年龄”(整个字符串)和“位置”(整个字符串)的变量，可以弹出到工具提示中。

我的问题是 - 首先，元素是对整个元素 (mtg_..) 的引用，我是否只是通过子节点添加文本，然后使用 CSS 设置样式？有人能给我指出正确的方向吗，因为每个指南要么太基础/信息不足，要么太复杂。

我愿意自己做，只是不知道从何入手。

Answer 1

您可以使用 innerHTML 通过 javascript 向工具提示的现有元素添加一个元素。然后将工具提示绝对定位在此元素中，并应用 opacity 和 visibility 与 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>