get dynamic details on image mouseover in nested gridview

get dynamic details on image mouseover in nested gridview

HTML

<img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information A a" />
<br></br>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information B b" />
            
    <div id="divshowpopup">
        <p id="dbInfo">
        </p>
    </div>

CSS

#info
        {
            background: #337ab7;    
            width: 300px;
            padding-bottom: .5em;
            padding-right: 2px;
            overflow: hidden;
            position: absolute;
    padding: 20px; 
   color: #FFFFFF;
    border-radius: 10px;
    -moz-border-radius: 10px; 
        }

JavaScript

$(document).ready(function () {
            var offsetY = -20;
            var offsetX = 40;
            var html = '<div id="info" class="InfoMessage"><h4>Info here </h4><p></p></div>';
            $(html).hide().appendTo('body');

            $('img.imagepopupcontext').hover(function (e) {
                $('div.InfoMessage').hide().find('p').text($(this).data('message'));
                $('div.InfoMessage').fadeIn(400);
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            }, function () {
                $('#info').hide();
            });

            $('img.imagepopupcontext').mousemove(function (e) {
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            });
        });