Sometimes you need to show a tooltip over a different element than the one firing the mouseover event. Fortunately, d3-tip allows you to do that by passing an SVGElement as the second parameter to tip.show(). Like this:
tip.show(data, target)This SVGElement will be the new target of the tooltip.
| // d3.tip | |
| // Copyright (c) 2013 Justin Palmer | |
| // | |
| // Tooltips for d3.js SVG visualizations | |
| (function (root, factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| // AMD. Register as an anonymous module with d3 as a dependency. | |
| define(['d3'], factory) | |
| } else if (typeof module === 'object' && module.exports) { | |
| // CommonJS | |
| module.exports = function(d3) { | |
| d3.tip = factory(d3) | |
| return d3.tip | |
| } | |
| } else { | |
| // Browser global. | |
| root.d3.tip = factory(root.d3) | |
| } | |
| }(this, function (d3) { | |
| // Public - contructs a new tooltip | |
| // | |
| // Returns a tip | |
| return function() { | |
| var direction = d3_tip_direction, | |
| offset = d3_tip_offset, | |
| html = d3_tip_html, | |
| node = initNode(), | |
| svg = null, | |
| point = null, | |
| target = null | |
| function tip(vis) { | |
| svg = getSVGNode(vis) | |
| point = svg.createSVGPoint() | |
| document.body.appendChild(node) | |
| } | |
| // Public - show the tooltip on the screen | |
| // | |
| // Returns a tip | |
| tip.show = function() { | |
| var args = Array.prototype.slice.call(arguments) | |
| if(args[args.length - 1] instanceof SVGElement) target = args.pop() | |
| var content = html.apply(this, args), | |
| poffset = offset.apply(this, args), | |
| dir = direction.apply(this, args), | |
| nodel = d3.select(node), | |
| i = directions.length, | |
| coords, | |
| scrollTop = document.documentElement.scrollTop || document.body.scrollTop, | |
| scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft | |
| nodel.html(content) | |
| .style({ opacity: 1, 'pointer-events': 'all' }) | |
| while(i--) nodel.classed(directions[i], false) | |
| coords = direction_callbacks.get(dir).apply(this) | |
| nodel.classed(dir, true).style({ | |
| top: (coords.top + poffset[0]) + scrollTop + 'px', | |
| left: (coords.left + poffset[1]) + scrollLeft + 'px' | |
| }) | |
| return tip | |
| } | |
| // Public - hide the tooltip | |
| // | |
| // Returns a tip | |
| tip.hide = function() { | |
| var nodel = d3.select(node) | |
| nodel.style({ opacity: 0, 'pointer-events': 'none' }) | |
| return tip | |
| } | |
| // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. | |
| // | |
| // n - name of the attribute | |
| // v - value of the attribute | |
| // | |
| // Returns tip or attribute value | |
| tip.attr = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).attr(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.attr.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. | |
| // | |
| // n - name of the property | |
| // v - value of the property | |
| // | |
| // Returns tip or style property value | |
| tip.style = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).style(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.style.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Set or get the direction of the tooltip | |
| // | |
| // v - One of n(north), s(south), e(east), or w(west), nw(northwest), | |
| // sw(southwest), ne(northeast) or se(southeast) | |
| // | |
| // Returns tip or direction | |
| tip.direction = function(v) { | |
| if (!arguments.length) return direction | |
| direction = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: Sets or gets the offset of the tip | |
| // | |
| // v - Array of [x, y] offset | |
| // | |
| // Returns offset or | |
| tip.offset = function(v) { | |
| if (!arguments.length) return offset | |
| offset = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: sets or gets the html value of the tooltip | |
| // | |
| // v - String value of the tip | |
| // | |
| // Returns html value or tip | |
| tip.html = function(v) { | |
| if (!arguments.length) return html | |
| html = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| function d3_tip_direction() { return 'n' } | |
| function d3_tip_offset() { return [0, 0] } | |
| function d3_tip_html() { return ' ' } | |
| var direction_callbacks = d3.map({ | |
| n: direction_n, | |
| s: direction_s, | |
| e: direction_e, | |
| w: direction_w, | |
| nw: direction_nw, | |
| ne: direction_ne, | |
| sw: direction_sw, | |
| se: direction_se | |
| }), | |
| directions = direction_callbacks.keys() | |
| function direction_n() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.n.y - node.offsetHeight, | |
| left: bbox.n.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_s() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.s.y, | |
| left: bbox.s.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_e() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.e.y - node.offsetHeight / 2, | |
| left: bbox.e.x | |
| } | |
| } | |
| function direction_w() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.w.y - node.offsetHeight / 2, | |
| left: bbox.w.x - node.offsetWidth | |
| } | |
| } | |
| function direction_nw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.nw.y - node.offsetHeight, | |
| left: bbox.nw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_ne() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.ne.y - node.offsetHeight, | |
| left: bbox.ne.x | |
| } | |
| } | |
| function direction_sw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.sw.y, | |
| left: bbox.sw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_se() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.se.y, | |
| left: bbox.e.x | |
| } | |
| } | |
| function initNode() { | |
| var node = d3.select(document.createElement('div')) | |
| node.style({ | |
| position: 'absolute', | |
| top: 0, | |
| opacity: 0, | |
| 'pointer-events': 'none', | |
| 'box-sizing': 'border-box' | |
| }) | |
| return node.node() | |
| } | |
| function getSVGNode(el) { | |
| el = el.node() | |
| if(el.tagName.toLowerCase() === 'svg') | |
| return el | |
| return el.ownerSVGElement | |
| } | |
| // Private - gets the screen coordinates of a shape | |
| // | |
| // Given a shape on the screen, will return an SVGPoint for the directions | |
| // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), | |
| // sw(southwest). | |
| // | |
| // +-+-+ | |
| // | | | |
| // + + | |
| // | | | |
| // +-+-+ | |
| // | |
| // Returns an Object {n, s, e, w, nw, sw, ne, se} | |
| function getScreenBBox() { | |
| var targetel = target || d3.event.target; | |
| while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) { | |
| targetel = targetel.parentNode; | |
| } | |
| var bbox = {}, | |
| matrix = targetel.getScreenCTM(), | |
| tbbox = targetel.getBBox(), | |
| width = tbbox.width, | |
| height = tbbox.height, | |
| x = tbbox.x, | |
| y = tbbox.y | |
| point.x = x | |
| point.y = y | |
| bbox.nw = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.ne = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.se = point.matrixTransform(matrix) | |
| point.x -= width | |
| bbox.sw = point.matrixTransform(matrix) | |
| point.y -= height / 2 | |
| bbox.w = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.e = point.matrixTransform(matrix) | |
| point.x -= width / 2 | |
| point.y -= height / 2 | |
| bbox.n = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.s = point.matrixTransform(matrix) | |
| return bbox | |
| } | |
| return tip | |
| }; | |
| })); |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| rect { | |
| stroke: #aaa; | |
| stroke-width: 1px; | |
| fill: #eee; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font-weight: bold; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="d3tip.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "You're touching my " + d.name + "!"; | |
| }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(100,100)"); | |
| svg.call(tip); | |
| var data = [ | |
| { | |
| width: 30, | |
| height: 120, | |
| transform: "translate(100,200)rotate(30)", | |
| name: "right leg", | |
| }, | |
| { | |
| width: 30, | |
| height: 120, | |
| transform: "translate(140,215)rotate(-30)", | |
| name: "left leg", | |
| }, | |
| { | |
| width: 40, | |
| height: 100, | |
| transform: "translate(115,90)", | |
| name: "torso", | |
| }, | |
| { | |
| width: 60, | |
| height: 60, | |
| transform: "translate(105,20)", | |
| name: "head", | |
| }, | |
| { | |
| width: 20, | |
| height: 10, | |
| transform: "translate(130,60)", | |
| name: "mouth", | |
| }, | |
| { | |
| width: 10, | |
| height: 10, | |
| transform: "translate(115,35)", | |
| name: "right eye", | |
| }, | |
| { | |
| width: 10, | |
| height: 10, | |
| transform: "translate(145,35)", | |
| name: "left eye", | |
| }, | |
| { | |
| width: 20, | |
| height: 90, | |
| transform: "translate(40,40)rotate(-30)", | |
| name: "right arm", | |
| }, | |
| { | |
| width: 20, | |
| height: 90, | |
| transform: "translate(210,35)rotate(30)", | |
| name: "left arm", | |
| }, | |
| ]; | |
| svg.selectAll("rect") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("id", function(d) { return d.name.replace(" ", "-") }) | |
| .attr("width", function(d) { return d.width }) | |
| .attr("height", function(d) { return d.height }) | |
| .attr("transform", function(d) { return d.transform }) | |
| .on("mouseover", function(d) { tip.show(d, document.getElementById("head")) }) | |
| .on("mouseout", tip.hide); | |
| </script> |
