0

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/

1 Answer 1

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...

1
  • Thank you so much @saikiran.vsk. Got a solution :) Feb 16, 2015 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.