JVME: hint exploration

by levchenko_d

HTML

<div class="__centered _item">
    <div class="_popover">
        <p>Click somewhere to close me</p>
    </div>
    <p>Input Label <span class="_hint_toggler">Hint</span></p>
    <input type="text"/>
</div>

CSS

body{
    font-family: sans-serif;
}

.__centered{
    position: absolute;
    width: 200px;
    height: 70px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
}

._popover{
    display: none;
    position: absolute;
    top: -50px;
    width: 155px;
    max-width: 155px;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    text-align: center;
    border-radius: 5px;
    font-size: 10pt;
    padding: 0 10px;
    font-family: monospace;
}

.__pop_show ._popover{
    display: block;
}

._hint_toggler{
    opacity:0;
    color: #9E9E9E;
    border-bottom: dashed 1px #9E9E9E;
    font-size: 11pt;
    cursor: pointer;
    margin-left: 5px;
}

._item:hover ._hint_toggler, .__pop_show ._hint_toggler{
    opacity:1;
}

.__pop_show ._hint_toggler, ._hint_toggler:hover{
    color: #343833;
    border-color: #34383e;
}

._hint_toggler:active{
    color: #000;
    border-color: #000;
}

JavaScript

var hintToggler = document.querySelector('._hint_toggler');
var p = document.querySelector('._popover');

$(document).click(function(e){
    if(e.target !== hintToggler && e.target !== p){
        $('._item').removeClass('__pop_show');
    } else {
        $('._item').addClass('__pop_show');
    }
})