diff --git a/docs/initializing-tooltips.md b/docs/initializing-tooltips.md index a3c75d2..4e88ef9 100644 --- a/docs/initializing-tooltips.md +++ b/docs/initializing-tooltips.md @@ -24,4 +24,4 @@ var vis = d3.select(document.body) // Show and hide the tooltip .on('mouseover', tip.show) .on('mouseout', tip.hide) -``` \ No newline at end of file +``` diff --git a/docs/showing-and-hiding-tooltips.md b/docs/showing-and-hiding-tooltips.md index 031f7f8..64fdee4 100644 --- a/docs/showing-and-hiding-tooltips.md +++ b/docs/showing-and-hiding-tooltips.md @@ -15,6 +15,17 @@ rect.on('mouseover', function(d) { }) ``` +#### Explicit targets +Sometimes you need to manually specify a target to act on. For instance, maybe +you want the tooltip to appear over a different element than the one that triggered +a `mouseover` event. You can specify an explicit target by passing an `SVGElement` +as the last argument. + +``` javascript +tip.show(data, target) +``` + + ### tip.hide Hide a tooltip @@ -26,4 +37,4 @@ rect.on('mouseout', tip.hide) rect.on('mouseout', function(d) { tip.hide(d) }) -``` \ No newline at end of file +``` diff --git a/examples/explicit-target.html b/examples/explicit-target.html new file mode 100644 index 0000000..2c2b45c --- /dev/null +++ b/examples/explicit-target.html @@ -0,0 +1,145 @@ + + + + d3.tip.js - Tooltips for D3 + + Explicit Target + + + + + + +
+ +
+ + +