In d3.js How to adjust tooltip (up and down) based on the screen position?

Question

I was created a geo map using d3.js .In that i created a tooptip over each country.

Basically am creating tooltip while mousemove event.

Code for Tooltip:

.on("mousemove", function(d) {  

    return tooltip
    .style("left",d3.event.pageX+"px")
    .style("top",d3.event.pageY+10+"px")
    .style("visibility", "visible")             

    .html(function() {

    return '<div style="border:1px solid #ccc;">'
            +'<p style="font-weight:bold;">'+ d.properties.name +'</p>'
            +'<div>'+d.properties.tooltip+'</div></div>';                                                                               
       })   

})

My tooltip was working fine.I used d3.event.pageX and d3.event.pageY for getting current location.Basically am updating tooltip style left with d3.event.pageX and top with d3.event.pageY .

So far tooltip is coming below for each country.But i need display tooltip based the window position.

For example:

If i mousemove the top placed countries like United states i need to display tooltip below the country.Suppose if i mousemove over the Antarctica i need to display tooltip above the country(Because Antarctica is the bottom country so that tooltip cant visible properly in the page)

So my problem is i need to change the tooltip postion based on the windows postion.Please help me solve this.I update my fiddle link below.Kindly take a look.

Fiddle Link - http://jsfiddle.net/sam0kqvx/36/

Answer 1

Try to calculate, If the mouse is reaching the bottom, If mouse position is at bottom then set top value as needed. Below is the code

.style("top",function(){
                    if(current_position[1]+70 > 500){
                        return current_position[1]-50+"px";
                    }else{
                        return current_position[1]+100+"px"
                    }
                })

Hope you got it, If not ask me for more...