nipple-popover-demo

by shyamh

HTML

<div>
    <div>
        <p>This is a popover example:</p>
    </div>
</div>

<div class="example1 popover">
    
    <!-- INSTRUCTIONS FOR TESTING
         Change arrow-top-left, -top-right, -bottom-left, etc. to test 
         where the arrow appears 
         -->
    <div class="arrow arrow-white arrow-top-left"></div>
    
    <div class="popover-content">
        Sed ut perspiciatis unde omnis iste natus error.<br />
        <br />
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Sed ut      
        perspiciatis unde omnis iste natus error.<br />
        <br />
        And then ...<br />
        <input type="text" value="Enter something here" /><br />
        <br />
        <input type="button" value="accept" />
        <input type="button" value="cancel" />
    </div>
</div>

CSS

body { 
    margin: 20px;
    font-family: Tahoma,Sans-serif;
    font-size: 0.9em;
}

.example1 {
    position: relative;
    width: 300px;
    height: auto;
}

.example2 {
    position: relative;
    width: 120px;
    height: auto;
}

.popover {
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 7.5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 15px 0px;
    padding: 5px;
}

.arrow {
    position: absolute;
    display: block;
    background-repeat: no-repeat no-repeat;
    /* background-color: #fcc; */
}

.arrow-white {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNq81zsOgzAMBuCkL0Tu1JFzdK16K4YeAjEzs3ETptKm+RGpECo0TuxasoCA/EEUOUIremiXO5f76frp8uXSUotQnwd4rOv6goGiKEp3eEwvYJVAAD24NFVV3dq2tUicY2y6p8XRvu/HlMS/oj6k8E1UCg9CuXESyoVHoal4EhqLs6BUnBUNxUXQEBy9N5dAV/DcbzAn1/CvUugShwUT25syxpyzLFNIqfD1Yfmxcaqbprl3XWeHYWD/WtREbRjzqf4sLgl8ga6vbE78FyqCh6KsOBVlwWPRJDwVjcK5UBLOjQbhUugmLo2u4v9Al/jY22e9l4zqSDz5p+0twAAEDMYzvRJQugAAAABJRU5ErkJggg==');
}

.arrow-bottom-left {
    width: 30px; 
    height: 15px; 
    bottom: -15px; 
    background-position: 0px -16px; 
    left: 15px;
}

.arrow-bottom-right {
    width: 30px; 
    height: 15px; 
    bottom: -15px; 
    background-position: 0px -16px; 
    right: 15px;
}

.arrow-top-left {
    width: 30px; 
    height: 15px; 
    top: -15px; 
    background-position: 0px 0px; 
    left: 15px;
}

.arrow-top-right {
    width: 30px; 
    height: 15px; 
    top: -15px; 
    background-position: 0px 0px; 
    right: 15px;
}

.arrow-left-top {
    width: 15px; 
    height: 30px; 
    left: -15px; 
    background-position: 0px 0px; 
    top: 15px;
}

.arrow-left-bottom {
    width: 15px; 
    height: 30px; 
    left: -15px; 
    background-position: 0px 0px; 
    bottom: 15px;
}

.arrow-right-top {
    width: 15px; 
    height: 30px; 
    right: -15px; 
    background-position: -16px 0px; 
    top:...