javascript 中的简单工具提示

Question

我正在尝试在 javascript 中创建一个非常简单的工具提示。这是相同的 jsFiddle。我只是试图将工具提示 div 围绕被单击的元素对齐。请注意，单击跨度 link 确实会添加子 div 工具提示，但问题是由于某种原因它与视口的位置相关（而不是与其祖先元素相关，即 link . 对定位有什么想法吗？

<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;
}

Answer 1

您不能在 CSS 中使用 // inline comments。

因此，您设置的不是 position，而是 //important! position，这不是真正的 CSS 属性。

删除评论即可。 jsFiddle 的语法高亮误导了你。

javascript 中的简单工具提示

simple tooltip in javascript

javascript

css-position

tooltip