простая подсказка в javascript

Question

Я пытаюсь создать очень простой инструмент в javascript. Вот для этого jsFiddle. Я просто пытаюсь выровнять tooltip 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

вы не можете использовать // inline comments в CSS.

Таким образом, вместо того, чтобы устанавливать position, вы настраиваете //important! position, который не является реальной CSS свойства.

Удалить комментарий, и он работает. синтаксис jsFiddle подсветка ввела вас в заблуждение.