Created
June 9, 2011 14:42
-
-
Save biovisualize/1016860 to your computer and use it in GitHub Desktop.
Simple D3 tooltip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| </head> | |
| <body> | |
| <div class="example_div"></div> | |
| <script type="text/javascript"> | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .style("position", "absolute") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden") | |
| .text("a simple tooltip"); | |
| var sampleSVG = d3.select(".example_div") | |
| .append("svg:svg") | |
| .attr("class", "sample") | |
| .attr("width", 300) | |
| .attr("height", 300); | |
| d3.select(".example_div svg") | |
| .append("svg:circle") | |
| .attr("stroke", "black") | |
| .attr("fill", "aliceblue") | |
| .attr("r", 50) | |
| .attr("cx", 52) | |
| .attr("cy", 52) | |
| .on("mouseover", function(){return tooltip.style("visibility", "visible");}) | |
| .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) | |
| .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); | |
| </script> | |
| </body> | |
| </html> |
Here it is (Note that i'm using jquery here).
function positionTooltip(mouse, scene, tooltip)
{
//Distance of element from the right edge of viewport
if (scene.width - (mouse.x + tooltip.width) < 20)
{ //If tooltip exceeds the X coordinate of viewport
mouse.x = mouse.x - tooltip.width - 20;
}
//Distance of element from the bottom of viewport
if (scene.height - (mouse.y + tooltip.height) < 20)
{ //If tooltip exceeds the Y coordinate of viewport
mouse.y = mouse.y - tooltip.height - 20;
}
return {
top: mouse.y,
left: mouse.x
};
}usage:
// Early in the code
var w = $(window).width();
var h = $(window).height();
var margin = {
x: 10,
y: 10
};
var padding = {
x: 10,
y: 10
};
var tooltip = {
width: $('.tooltip').width(),
height: $('.tooltip').height(),
}
var scene = {
x: margin.x + padding.x,
y: margin.y + padding.y,
width: w - (margin.x * 2) - (padding.x * 2),
height: h - (margin.y * 2) - (padding.y * 2)
}
// then, when defining the tooltip div events...
.on("mouseover", function(d)
{
div.transition().duration(200).style("opacity", 1);
//div.html(popupHtml(d)).style("left", (d3.event.pageX + 10) + "px").style("top", (d3.event.pageY - 10) + "px");
div.html(popupHtml(d)).style("left", function()
{
var pos = positionTooltip(
{
x: d3.event.pageX,
y: d3.event.pageY
}, scene, tooltip);
return (pos.left + 10) + 'px';
}).style("top", function()
{
var pos = positionTooltip(
{
x: d3.event.pageX,
y: d3.event.pageY
}, scene, tooltip);
return (pos.top - 10) + 'px';
});
}).on("mousemove", function(d)
{
//div.style("left", (d3.event.pageX + 10) + "px").style("top", (d3.event.pageY - 10) + "px");
div.style("left", function()
{
var pos = positionTooltip(
{
x: d3.event.pageX,
y: d3.event.pageY
}, scene, tooltip);
return (pos.left + 10) + 'px';
}).style("top", function()
{
var pos = positionTooltip(
{
x: d3.event.pageX,
y: d3.event.pageY
}, scene, tooltip);
return (pos.top - 10) + 'px';
});
}).on("mouseout", function(d)
{
div.transition().duration(500).style("opacity", 0);
});
Nice example. But if you try this on firefox your tooltip is under the circle. You should change event.page to d3.event.pageX/Y like in the example from pixeline.
I've created a simple library for dealing with tooltips in d3 if anyone is interested.
@caged Thanks! this is really helpful +1
If anyone else is getting event is not defined or similar add d3. to the events:
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
svg:title does work as a tooltip in Firefox 37 and Chrome 42. That's good enough for me! :)
Can we apply anything instead of
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
because when i use this the tooltip is not displaying in its position correctly.....
Below two things also not working:
1)
.style("left", d3.select(this).attr("cx") + "px")
.style("top", d3.select(this).attr("cy") + "px");
.style("left", dx + "px")
.style("top", dy + "px");
Can i have good solution for this?
brilliant and simple, thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I use this old barebone code example as a template to build more sophisticated one. I can integrate your patch and share a reusable version soon.