Question

我正在尝试在javascript中创建一个非常简单的工具提示。这是同一个jsFiddle。我只是试图将工具提示div与被点击的元素对齐。请注意，单击span链接确实添加了一个子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;
}

Answer 1

您无法在CSS中使用// inline comments。

所以，不是设置position，而是设置//important! position，这不是真正的CSS属性。

删除评论并且有效。 jsFiddle语法突出显示误导了你。

javascript中的简单工具提示

1 个答案: