popup balloon

by SpacePineapple

HTML

<div id="edit" class="popup"><center><p>Edit | Share | Delete</p></center></div>
<table>
    <tr>
    <td>
        <img id="image1" class="image" src="http://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"/>
    </td>
    <td>
        <img id="image2" class="image" src="http://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"/>
    </td>
    <td>
        <img id="image3" class="image" src="http://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"/>
    </td>
    </tr>
</table>

CSS

.popup {
        position: absolute;
        width: 185px;
        height: 35px;
        padding: 0px;
        display: none;
        z-index:9999999;
        background: #ffffff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(33, 47, 98, 1);
        -moz-box-shadow:    0px 0px 30px 0px rgba(33, 47, 98, 1);
        box-shadow:         0px 0px 30px 0px rgba(33, 47, 98, 1);
    }

.popup:after {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 0 15px 15px;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        z-index: 1;
        top: -15px;
        left: 110px;
    }

JavaScript

$(".image").click(function(){
    var id = $(this).attr('id');
    var offset = $(this).offset();
    offset.top += $(this).height();
    $("#edit").offset(offset);
    $("#edit").fadeIn();
});