Event handler: mouse hover with detail panel using jQuery

app.js

    // DOM element
    var modelImageArr   = $('#model-image-list div img');
    var tooltipPanel    = $('#tooltip-panel');  
  
    // Event binding
    modelImageArr.on('mouseover', modelImageOverHandler)
        .on('mouseout', modelImageOutHandler);

    tooltipPanel.on('mouseover', tooltipOverHandler)
        .on('mouseout', tooltipOutHandler);


    // Event Handler
    function modelImageOverHandler(e) {
        var position    = $(this).offset();
        var ycoord      = position.top;
        var xcoord      = 0;
        if(position.left / $(window).width() >= 0.5) {
            xcoord = position.left - 530;
        } else {
            xcoord = position.left;
        }

        console.log('mouse over '+ xcoord + "," +ycoord);

        tooltipPanel.css({ 'left': xcoord, 'top': ycoord, 'display': 'block'});
    }

    function modelImageOutHandler(e) {
        tooltipPanel.css('display','none');
    }

    function tooltipOverHandler(e) {
        $(this).css('display','block');
    }
    function tooltipOutHandler(e) {
        var e = e.toElement || e.relatedTarget;
        if (e.parentNode == this || e.parentNode.parentNode == this || e.parentNode.parentNode.parentNode == this
            || e == this || e.nodeName == 'IMG') {
            return;
        }
        $(this).css('display','none');
    }

index.html

<div id="tooltip-panel" style="display: none;">
        <form role="form" action="#" method="get">
            <input id="tooltip-input" type="text" class="form-control" placeholder="X as ?, Y as ?, Z as ? ...">
        </form>
</div>

style.css

#tooltip-panel {
    display: block;
    color: #414141;
    background: #f1f1f1;
    border: 1px solid #a9a9a9;
    position: absolute;
    z-index: 99999;
    width: 530px;
    padding: 6px 8px;
    -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.4);
    box-shadow: 1px 3px 3px rgba(0,0,0,0.4);
}