Javascript 高效的HTML工具提示呈现（重用工具提示）

我正在生成显示字段级别记录的html（即名称、dob、常用编程语言等），并为每个字段创建html工具提示

我知道可以使用标题，但我正在显示不同类型的记录，并希望允许用户使用快速工具提示来显示他们正在查看的内容

这对于少量记录来说效果很好，但是当我有数千条记录时，html基本上是由相同的工具提示数据反复组成的

我希望以某种方式在css或javascript中预先创建这些工具提示，以便只需在页面上呈现一次实际的工具提示内容，但可以通过指定类（或类似类）进行重用

例如，假设：

<div class="field tooltip">bar<span class="tooltiptext">This
 field represents what foo needs</span></div>

barThis
字段表示foo所需的内容

我想用这样的方式来代替：

<div class="field tooltip tt-bar">bar</div>

条

其中，

tt栏

指使用css和/或javascript创建的工具提示

任何想法都将不胜感激

---

注意：我不使用JQuery或任何其他LIB，我希望保持这种方式。

这里有一个只使用CSS的快速而肮脏的解决方案

*[数据工具提示]{
文字装饰：下划线虚线；
位置：相对位置；
}
*[数据工具提示]：悬停：在{
背景：#333；
边界半径：4px；
颜色：#ccc；
内容：attr（数据工具提示）；
填充物：2px4px；
位置：绝对位置；
空白：nowrap；
顶部：计算（100%+4px）；
}
*[数据工具提示]：悬停：在{
背景：#333；
内容：''；
宽度：6px；
高度：6px；
位置：绝对位置；
空白：nowrap；
顶部：计算值（100%+1px）；
左：8px；
变换：旋转（45度）；
}

---

foobarbaz

related：这是一种有趣的方法，尽管我试图避免内联指定内容。我确实创建了一个使用javascript工具提示映射的版本，然后将它们分配给字段的innerHTML。虽然这样可以减小文件的大小，但在大文件上，完成javascript需要相当长的时间。现在，我只是内联指定内容。在我的测试文件中，完整版本为22MB，但渲染时间为30秒，而8MB，完成javascript例程大约需要3分钟。@Brice我提供了一个替代方案，说明了如何避免使用内联工具提示。太棒了！我用了你的方法，效果很好。受第一个代码片段的启发，我尝试使用内容并在之后执行第二个代码片段中的操作，但未成功。谢谢@p-s-w-g。