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/