JavaScript工具提示定位问题

Question

I would like to create a javascript popup using following script.

var xOffset = 30;
var yOffset = -5;

function showPopup (targetObjectId, eventObj) {
    var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0);
    var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0);
    moveObject(targetObjectId, newXCoordinate, newYCoordinate);

    -----etc
}



function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {

//      newXCoordinate = newXCoordinate-8;
//      newYCoordinate = newYCoordinate-300;

        styleObject.left = newXCoordinate;
        styleObject.top = newYCoordinate;
        return true;
    } else {
        // we couldn't find the object, so we can't very well move it
        return false;
    }
} // moveObject

Demo here:

http://jsfiddle.net/jkdYr/

Popup will show successfully but, its positioning becomes an issue. Popup not getting dynamic position according to cursor move. Anybody can please help to change the above script to show popup position according to cursor position. ie, normally popup attach to bottom of element; if there is not enough space at bottom popup should attach top

Thanks

Answer 1

I think this is what you need:

<li id="list-item" onclick="return !showPopup('product_deatils_2', event);">
    <a href="javascript:;">Product2</a>
    <div onclick="event.cancelBubble = true;" class="popup" id="product_deatils_2"><a href="javascript:;" onclick="hideCurrentPopup(); return false;" title="close" class="popupLink">[x]</a> Popup Text  
    </div>
</li>

and in your JS use something like this:

$("#list-item").click(function (e) {
    $("#product_deatils_2").css("margin-left",e.offsetX);
    $("#product_deatils_2").css("margin-top",e.offsetY); 
});

Let me know if it helps :)

Answer 2

Please check this. Is this tht ur looking fr?

http://jsfiddle.net/jkdYr/5/

I just modified the functions like

function showPopup(elementN, event){
    $("#"+elementN).css({
        "display":"block",
        "top":event.pageY+"px" ,
        "left":event.pageX+"px"    
    })
}
function hideCurrentPopup(ele){
    $(ele).parent().hide();
}

if you dont use jquery then also it can be simply implemented in pure js.