Pop-Over On Image Click

by bhatnagar018

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<img class="Img" width="48px" height="48px" alt="Mapa" src="http://img.freeflagicons.com/thumb/fluttering_flag/india/india_640.png">
<div class="popover">
    <input type='text' class='span1' />
    <input type='button' class='btn' value='Save' />
</div>

CSS

.popover {
    position:absolute;
    display:none;
    background:#fff;
    border: 1px solid #999;
    padding:10px;
    width:auto;
    box-shadow:0 0 10px rgba(0, 0, 0, .5);
}
.popover:after, .popover:before {
    right: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.popover:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}
.popover:before {
    border-color: rgba(201, 201, 201, 0);
    border-right-color: #c9c9c9;
    border-width: 11px;
    top: 50%;
    margin-top: -11px;
}

JavaScript

$('.Img').click(function (e) {
    var offset = $(this).offset();
    var left = e.pageX;
    var top = e.pageY;
    var theHeight = $('.popover').height();
    $('.popover').show();
    $('.popover').css('left', (left) + 'px');
    $('.popover').css('top', (top) + 'px');
});