javascript中的简单工具提示

我试图用javascript创建一个非常简单的工具提示。这是同样的理由。我只是尝试将工具提示div与单击的元素对齐。请注意，单击“跨度”链接确实会添加子div工具提示，但问题是出于某种原因，它与视口的位置相关（而与其祖先元素（即链接）无关）。您对定位有何想法

<span class="link">You can</span> click any of <span class="link">these links</span>

.tooltip {
  position: absolute;
  color: white;
  background: black;
  top: 5px;
  left: 5px;
  height: 20px;
  width: 80px;
}

.link {
  // important!
  position: relative;
}

var links = document.getElementsByClassName("link");

for ( var i = 0 ; i < links.length ; i++ ) {
    links[i].addEventListener('click', function(e) {
    var toolTip = createToolTipDOM('tooptip')
    var where = e.target
    if ( hasClass(where, 'link') ) {
        where.appendChild(toolTip)
    }
  })
}

function createToolTipDOM(text) {
    var s = '<div class=tooltip>' + text + '</div>'; // HTML string
    var div = document.createElement('div');
    div.innerHTML = s;
    var tooltip = div.childNodes[0];
  return tooltip
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

您可以单击这些链接中的任意一个
.工具提示{
位置：绝对位置；
颜色：白色；
背景：黑色；
顶部：5px；
左：5px；
高度：20px；
宽度：80px；
}
.链接{
//重要！
位置：相对位置；
}
var links=document.getElementsByClassName（“链接”）；
对于（变量i=0；i-1；
}

您不能在CSS中使用

//内联注释

因此，您没有设置
位置
，而是设置了
//重要！位置
，这不是真正的CSS属性

删除注释，它就会工作。JSFIDLE语法突出显示误导了您