Notes

wikipedia like footnotes

by levchenko_d

HTML

<p style="margin-top: 000px;">Джон Голт (также есть вариант перевода Джон Галт)<span class="_note" data-code="1">[1]</span> (англ. John Galt) — один из главных героев романа Айн Рэнд «Атлант расправил плечи». Несмотря на то, что человек с этим именем появляется лишь во второй части романа, он незримо присутствует с самых первых строк, так как является героем вопроса-поговорки, <span class="_note" data-code="2" data-value="testing data value">[2]</span>задаваемого в разных ситуациях многими персонажами: «Кто такой Джон Голт?».</p>

CSS

._note{
    color: #00b0ef;
    position: relative;
    cursor: help;
}

._note_pop{
    position: absolute;
    visibility: hidden;
    min-width: 200px;
    min-height: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: black;
    padding: 5px 10px;
    cursor: default;
    z-index: 999;
}

.__top, .__bottom{
    visibility: visible;
}

.__top{
    top: 20px;
}

.__bottom{
    bottom: 20px;
}

.__left{
    left: 0;
}

.__right{
    right: 0;
}

JavaScript

var jsonData = {
    1: 'В переводе Д. В. Костыгина 1997 года используется вариант Галт, в переводе Ю. Р. Соколова 2007 года используется вариант Голт.' 
};

var Note = (function(jsonData){

    var notes = document.querySelectorAll('._note'),
        w = document.body.clientWidth;
    
    for(var i=0; i < notes.length; i++){
        var note = notes[i],
            popNote = document.createElement('div'),
            val = note.attributes['data-code'].nodeValue,
            data = note.attributes['data-value'] 
                   && note.attributes['data-value'].nodeValue 
                   || jsonData[val];
        
        if(data){
            
            popNote.className = '_note_pop';
            popNote.innerHTML = data;
            note.appendChild(popNote);
            
            note.onmouseover = function(e){
                var pop = this.childNodes[1];
                var dirY = e.pageY > (pop.clientHeight + 50) ? ' __bottom' : ' __top';
                var dirX = w - e.pageX > (pop.clientWidth) ? ' __left' : ' __right';
                
                console.log(pop.clientWidth, e.pageX)
                
                pop.className =  pop.className + dirY + dirX; 
            }
            
            note.onmouseleave = function(){
                this.childNodes[1].className = '_note_pop';
            }
            
        }
        
    }
    
}(jsonData));