comment obtenir une popup jquery au survol d'une image dans une grille imbriquée ?

Question

La fenêtre contextuelle récupère les informations d'une base de données et les ajoute dynamiquement à un panneau où elles s'affichent lorsque vous passez la souris sur l'image dans la grille imbriquée. La position de la fenêtre contextuelle doit également être à gauche de l'image. Lorsque vous passez la souris sur l'image, elle disparaît rapidement sans que je ne fasse de sortie avec la souris. j'ai besoin d'aide si quelqu'un peut m'aider car j'ai essayé d'accomplir ceci en utilisant jquery que je ne connais pas non plus.

 $('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');

        });

Cliquez ici pour voir la JSFIDDLE

Answer 1

Je pense que le code ci-dessous vous permettra de commencer votre voyage. J'ai également mis à jour votre JSFiddle. Bien que, je ne sais pas si cela va enregistrer sur votre compte là-bas.

La fonction de survol de jQuery intègre à la fois les fonctions "mouseover" et "mouseout", ce qui la rend un peu plus facile à utiliser.

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);
        });

    });