如何用getElementsByClassName正确迭代、匹配并拼接span实现Tooltip功能？

我正在实现一个功能：当页面中的词汇存在对应定义时，为其添加Tooltip。设计逻辑为：

• 获取页面中class为"check"的span元素
• 检查元素内容是否匹配关键词集合
• 若匹配到关键词，插入一个class为"tooltip"的新span元素，并将剩余内容放入新的"check" span中

目前已完成部分功能，但存在三类问题：

• 仅为某个关键词的最后一个匹配项添加Tooltip
• 仅为关键词字典中的最后一个关键词添加Tooltip
• 会在Tooltip的元文本中插入Tooltip（尽管"check"类本应避免此问题）

我确定代码实现有误，但不知如何排查修正，想询问当前的实现思路是否完全错误，相关代码如下：

const keywords = {
  "background": "pg 20. Your pilot`s background describes their life before they became a mech pilot.",
  "invoke": "pg 20. Outside of combat, you (or the GM) can invoke your pilot`s background to receive 1 ACCURACY or 1 DIFFICULTY on any skill check, if their background is relevant.",
  "ACCURACY": "pg 13. ACCURACY adds 1d6 to a roll. Multiple ACCURACY dice are a keep-highest roll. ACCURACY and DIFFICULTY cancel each other out on a 1:1 basis.",
  "DIFFICULTY": "pg 13. DIFFICULTY adds 1d6 to a roll. Multiple DIFFICULTY dice are a keep-highest roll. ACCURACY and DIFFICULTY cancel each other out on a 1:1 basis."
};

function tooltipper() {
  var spans = document.getElementsByClassName('check');
  for (var y in keywords) {
    for (var x of spans) {
      console.log('checking ' + y + ' against span ' + x.innerHTML + '...');
      var spantipper = inserttip(x, y);
      if (typeof spantipper !== 'undefined') {
        console.log('final before: ' + x.innerHTML);
        x.innerHTML = spantipper;
        console.log('final after: ' + x.innerHTML);
      } else {
        console.log(y + ' not found in span' + x.innerHTML.substr(0, 50) + '...');
      }
    }
  }
}

function inserttip(brick, keyword) {
  var bricktext = brick.innerHTML;
  var brickpost = '';
  var brickpre = brick.innerHTML;
  var match = brickpre.indexOf(keyword);
  var ogmatch = bricktext.indexOf(keyword);
  while (match != -1) {
    console.log(keyword + ' found')
    var brickopen = match;
    var brickclose = match + keyword.length;
    var remaining = brickpre.length - brickclose;
    brickpost += brickpre.substr(0, match);
    brickpost += '</span><span class="tooltip" data-tooltip="' + keywords[keyword] + '" data-tooltip-position="bottom">' + keyword + '</span><span class="check">';
    console.log('set: ' + brickpost)
    brickpre = brickpre.substr(brickclose, remaining);
    console.log('marched: ' + brickpre.substr(0, 50) + '...');
    match = brickpre.indexOf(keyword);
    if (match == -1) {
      console.log('end of matches for ' + keyword);
    }
  }
  if (ogmatch != -1) {
    brickpost += brickpre;
    return brickpost;
  }
}

内容的提问来源于stack exchange，提问作者Veav Bork