Question

The popup is getting the information from a database and dynamically add it to a panel where it will be displayed once you hover on the image within the nested gridview. the position of the popup should also be at the left of the image. when you hover on the image it quickly disappears withing me doing a mouse-out.
assistance is needed if anyone can help as i have been trying to accomplish this by using jquery which i am a newbie to as well.

 $('img.imagepopupcontext').mouseover(function () {
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent
            count++;
            $('#ctl00_ContentPlaceHolder1_txtkey').val(cvalue);
            $('#ctl00_ContentPlaceHolder1_btnpopupclick').click();

            var pos = $(this).offset();

            $('#ctl00_ContentPlaceHolder1_panelshow').css({
                position: "absolute",
                top: (pos.top - 100) + "px",
                left: (pos.left - 310) + "px"
            });
            $('#ctl00_ContentPlaceHolder1_panelshow').css('display', 'block');
            //alert('image test over' + pos.left + "," + pos.top);

        });

        $('img.imagepopupcontext').mouseout(function () {
            //alert(count);
            count = 0;
            //$('#ctl00_ContentPlaceHolder1_btnpopupclick').html('');
            $('#ctl00_ContentPlaceHolder1_panelshow').hide();
            //alert('image test mouse out');

        });

Click here to see the JSFIDDLE

Answer 1

I think the code below will start you off on your journey. I also updated your JSFiddle. Though, I don’t know if it will save on your account there.

The hover function in jQuery incorporates both ‘mouseover’ and ‘mouseout’ so it is a bit easier to use.

CSS

    #info
    {
        background: #CCC;
        width: 300px;
        padding-bottom: .5em;
        padding-right: 15px;
        overflow: hidden;
        position: absolute;
    }

---

HTML

    <table border="1" bgcolor="skyblue">
        <tr>
            <td>
                in progress
            </td>
            <td>
                Sale
            </td>
        </tr>
        <tr>
            <td>
                in progress
            </td>
            <td>
                <table border="1" bgcolor="orange">
                    <tr>
                        <td>
                            inner table
                        </td>
                        <td>
                            inner table2
                        </td>
                        <td>
                            <img id="imgpopup" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
            Show information from database
        </p>

jQuery

    $(function () {

        // Set the offsets for the mouse over upfront 
        // so they are easier to change.
        var offsetY = -20; 
        var offsetX = 40;

        $('#imgpopup').hover(function (e) {
            // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var $dbInfo = $('#dbInfo');

            // Create a variable that will hold the HTML
            // for the pop up. However, this is not the best
            // way dynamically create the popup. You should
            // look into jQuery templating.
            var html = '<div id="info">';
            html += '<h4>Info here</h4>';
            html += '<p>' + $dbInfo.text() + '</p>';
            html += '</div>';

            // Append the variable to the body and the select
            // itself and its children and hide them, so you
            // can then add a fadeIn effect.
            $('body')
                .append(html)
                    .children('#info')
                    .hide()
                    .fadeIn(400);

            // This is where the popup offesets away from your cursor
            // The variables set up top will decide how far away the
            // pop up strays away from your cursor.
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);

        }, function () {
            // Begin mouseout function

            // Remove on mouse out
            $('#info').remove();
        });

        // Whenever the mouse moves the popup will follow using
        // the offsets set up top.
        $('#imgpopup').mousemove(function (e) {
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
        });

    });