popover!

by theoperatore

HTML

<div>
    <input id="btn" type="button" value="I'm a button!"/>
    <p>I'm more content..aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="pop" class="popover">
    <h3>I'm a Popover</h3>
    <div class="arrow"></div>
</div>

CSS

body {
    max-width: 320px;
    word-wrap: break-word;
}
div.popover {
    font-family: helvetica;
    text-align: center;
    border-radius: 5pt;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    padding: 10px;
    max-width: 320px;
    top:40px;
    position:absolute;
    z-index:1337;
    background-color: #fff;
}

div.popover:before, div.popover:after {
    content: " ";
    height: 0;
    width: 0;
    position:absolute;
    border: 10px solid transparent;
}
div.popover:before {
    border-bottom-color: #fff;
    position: absolute;
    top: -19px;
    left: 70px;
    z-index:1339;
}
div.popover:after {
    border-bottom-color: #ccc;
    position: absolute;
    top: -20px;
    left: 70px;
    z-index:1338;
}

.hide { display: none !important; }

JavaScript

var btn = document.getElementById('btn'),
    pop = document.getElementById('pop');

btn.addEventListener('click', function() {
   pop.classList.toggle('hide');
}, false);