d3-tip.js-0.7.1/000077500000000000000000000000001302225545500132355ustar00rootroot00000000000000d3-tip.js-0.7.1/.gitignore000066400000000000000000000001001302225545500152140ustar00rootroot00000000000000components bower_components node_modules d3-tip.min.* /.project d3-tip.js-0.7.1/LICENSE000066400000000000000000000020661302225545500142460ustar00rootroot00000000000000The MIT License (MIT) Copyright (c) 2013 Justin Palmer Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.d3-tip.js-0.7.1/Makefile000066400000000000000000000006401302225545500146750ustar00rootroot00000000000000UGLIFYJS = node_modules/uglify-js/bin/uglifyjs UGLIFYCSS = node_modules/uglifycss/uglifycss all: d3-tip.min.js d3-tip.min.css d3-tip.min.js: index.js uglifyjs $(UGLIFYJS) $< -c -m -o $@ d3-tip.min.css: examples/example-styles.css uglifycss $(UGLIFYCSS) $< > $@ clean: @rm -f d3-tip.min.* uglifyjs: $(UGLIFYJS) $(UGLIFYJS): npm install uglify-js uglifycss: $(UGLIFYCSS) $(UGLIFYCSS): npm install uglifycss d3-tip.js-0.7.1/README.md000066400000000000000000000023321302225545500145140ustar00rootroot00000000000000# d3.tip: Tooltips for d3.js visualizations [![](https://github-images.s3.amazonaws.com/skitch/Screen_Shot_2013-04-08_at_11.40.10_AM-20130408-114054.png)](http://bl.ocks.org/Caged/6476579) * [See a live demo](http://bl.ocks.org/Caged/6476579) * [Example code](/examples) ### API Docs See the [API Documentation](docs/index.md) ### Download Latest Version * [Development Version](https://raw.github.com/Caged/d3-tip/master/index.js) : **6kb** / **~2kb gzipped** ### Install with Bower ``` bower install d3-tip ``` ### Quick Usage ```javascript /* Initialize tooltip */ tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; }); /* Invoke the tip in the context of your visualization */ vis.call(tip) vis.selectAll('rect') .data(data) .enter().append('rect') .attr('width', function() { return x.rangeBand() }) .attr('height', function(d) { return h - y(d) }) .attr('y', function(d) { return y(d) }) .attr('x', function(d, i) { return x(i) }) .on('mouseover', tip.show) .on('mouseout', tip.hide) ``` If you want basic styling, you can include `example-styles.css` using a service like rawgithub.com. ```html ``` d3-tip.js-0.7.1/bower.json000066400000000000000000000003661302225545500152530ustar00rootroot00000000000000{ "name": "d3-tip", "version": "0.7.1", "main": "index.js", "ignore": [ "**/.*", "node_modules", "components", "bower_components", "examples", "Makefile", "docs" ], "dependencies": { "d3": "^4.2" } } d3-tip.js-0.7.1/docs/000077500000000000000000000000001302225545500141655ustar00rootroot00000000000000d3-tip.js-0.7.1/docs/index.md000066400000000000000000000013671302225545500156250ustar00rootroot00000000000000# d3.tip API documetation #### [Initializing tooltips](initializing-tooltips.md) * [d3.tip](initializing-tooltips.md#d3tip) #### [Showing and hiding tooltips](showing-and-hiding-tooltips.md) * [tip.show](showing-and-hiding-tooltips.md#tipshow) * [tip.hide](showing-and-hiding-tooltips.md#tiphide) #### [Styling and modifying tooltips](styling-and-modifying-tooltips.md) * [tip.attr](styling-and-modifying-tooltips.md#tipattr) * [tip.style](styling-and-modifying-tooltips.md#tipstyle) #### [Positioning tooltips](positioning-tooltips.md) * [tip.direction](positioning-tooltips.md#tipdirection) * [tip.offset](positioning-tooltips.md#tipoffset) #### [Updating tooltip content](updating-tooltip-content.md) * [tip.html](updating-tooltip-content.md#tiphtml) d3-tip.js-0.7.1/docs/initializing-tooltips.md000066400000000000000000000012101302225545500210460ustar00rootroot00000000000000[API Documentation](index.md) ➤ Initializing tooltips # Initializing tooltips ### d3.tip Create and return a [configurable function](http://bost.ocks.org/mike/chart) for a tooltip. You ***must*** call the tip on the context of the target visualization. ``` javascript var tip = d3.tip() .attr('class', 'd3-tip') .html(function(d) { return d; }) var vis = d3.select(document.body) .append('svg') // REQUIRED: Call the tooltip on the context of the visualization .call(tip) vis.append('rect') .attr('width', 100) .attr('height', 100) // Show and hide the tooltip .on('mouseover', tip.show) .on('mouseout', tip.hide) ``` d3-tip.js-0.7.1/docs/positioning-tooltips.md000066400000000000000000000026371302225545500207340ustar00rootroot00000000000000[API Documentation](index.md) ➤ Positioning tooltips # Positioning tooltips ### tip.direction(direction) Sets the position of a tooltip relative to a target element. `direction` can be `n`, `s`, `e`, `w`, `nw`, `ne`, `sw` or `se`. The direction will also automatically be included as a classname on the tooltip element which allows for different style hooks based on the direction. ``` javascript tip.direction('n') // Position the tooltip to the top of a target element tip.direction('s') // Position the tooltip to the bottom of a target element tip.direction('e') // Position the tooltip to the right of a target element tip.direction('w') // Position the tooltip to the left of a target element ``` ##### Changing the direction programatically ``` javascript tip.direction(function(d) { if(d == 'california') return 'w' if(d == 'new york') return 'e' }) ``` ### tip.offset([values]) Offset a tooltip relative to its calculated position. Offset is computed from `[top, left]`. If you want to draw extenders on tooltips, use this method to offset the tooltip enough in the desired direction so the extender doesn't overlap the target element. ``` javascript tip.offset([10, -10]) ``` Callbacks are also supported for dynamic positioning. The following example will center tip placement within the bounding box of the target element. ``` javascript tip.offset(function() { return [this.getBBox().height / 2, 0] }) ``` d3-tip.js-0.7.1/docs/showing-and-hiding-tooltips.md000066400000000000000000000013531302225545500220420ustar00rootroot00000000000000[API Documentation](index.md) ➤ Showing and hiding tooltips # Showing and hiding tooltips ### tip.show Show a tooltip on the screen. ``` javascript rect.on('mouseover', tip.show) ``` ``` javascript rect.on('mouseover', function(d) { tip.show(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 ``` javascript rect.on('mouseout', tip.hide) ``` ``` javascript rect.on('mouseout', function(d) { tip.hide(d) }) ``` d3-tip.js-0.7.1/docs/styling-and-modifying-tooltips.md000066400000000000000000000012131302225545500225730ustar00rootroot00000000000000[API Documentation](index.md) Styling and modifying tooltips # Styling and modifying tooltips d3-tip makes no assumption about how tooltips will be styled, but we do provide some [useful example styles](../examples/example-styles.css). Incorporate it into your webpage like any other CSS file. For example, see [this jsfiddle](http://jsfiddle.net/deanmalmgren/eMPdu/) or any of the examples in the [examples directory](../examples/) ### tip.style A proxy to d3's [selection.style](https://github.com/mbostock/d3/wiki/Selections#wiki-style). ### tip.attr A proxy to d3's [selection.attr](https://github.com/mbostock/d3/wiki/Selections#wiki-attr). d3-tip.js-0.7.1/docs/updating-tooltip-content.md000066400000000000000000000003551302225545500214650ustar00rootroot00000000000000[API Documentation](index.md) ➤ Updating tooltip content # Updating tooltip content ### tip.html([content]) Set or get a tip's HTML content. ``` javascript var tip = d3.tip().html(function(d) { return "" + d + "" }) ```d3-tip.js-0.7.1/examples/000077500000000000000000000000001302225545500150535ustar00rootroot00000000000000d3-tip.js-0.7.1/examples/arrow-styles.html000066400000000000000000000045601302225545500204210ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Example styles d3-tip.js-0.7.1/examples/bars.html000066400000000000000000000113201302225545500166650ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Bar Chart
d3-tip.js-0.7.1/examples/bulk-attr-style.html000066400000000000000000000117571302225545500210170ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Bar Chart
d3-tip.js-0.7.1/examples/circles.html000066400000000000000000000050651302225545500173730ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Circles d3-tip.js-0.7.1/examples/css-transitions.html000066400000000000000000000130161302225545500211050ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 CSS Transitions
d3-tip.js-0.7.1/examples/example-styles.css000066400000000000000000000016121302225545500205410ustar00rootroot00000000000000.d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; pointer-events: none; } /* 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); position: absolute; pointer-events: none; } /* Northward tooltips */ .d3-tip.n:after { content: "\25BC"; margin: -1px 0 0 0; top: 100%; left: 0; text-align: center; } /* Eastward tooltips */ .d3-tip.e:after { content: "\25C0"; margin: -4px 0 0 0; top: 50%; left: -8px; } /* Southward tooltips */ .d3-tip.s:after { content: "\25B2"; margin: 0 0 1px 0; top: -8px; left: 0; text-align: center; } /* Westward tooltips */ .d3-tip.w:after { content: "\25B6"; margin: -4px 0 0 -1px; top: 50%; left: 100%; } d3-tip.js-0.7.1/examples/explicit-target.html000066400000000000000000000125611302225545500210530ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Explicit Target
d3-tip.js-0.7.1/examples/performance.html000066400000000000000000000045041302225545500202450ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 Bar Chart d3-tip.js-0.7.1/examples/requirejs.html000066400000000000000000000120311302225545500177470ustar00rootroot00000000000000 d3.tip.js - Tooltips for D3 require.js
d3-tip.js-0.7.1/index.js000066400000000000000000000203251302225545500147040ustar00rootroot00000000000000// 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 var d3 = require('d3') module.exports = factory(d3) } 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 = getNodeEl(), i = directions.length, coords, scrollTop = document.documentElement.scrollTop || document.body.scrollTop, scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft nodel.html(content) .style('opacity', 1).style('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') .style('left', (coords.left + poffset[1]) + scrollLeft + 'px') return tip; }; // Public - hide the tooltip // // Returns a tip tip.hide = function() { var nodel = getNodeEl() nodel.style('opacity', 0).style('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 getNodeEl().attr(n) } else { var args = Array.prototype.slice.call(arguments) d3.selection.prototype.attr.apply(getNodeEl(), 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 getNodeEl().style(n) } else { var args = Array.prototype.slice.call(arguments) d3.selection.prototype.style.apply(getNodeEl(), 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 : 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 : 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 : functor(v) return tip } // Public: destroys the tooltip and removes it from the DOM // // Returns a tip tip.destroy = function() { if(node) { getNodeEl().remove(); node = null; } 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').style('top', 0).style('opacity', 0) .style('pointer-events', 'none').style('box-sizing', 'border-box') return node.node() } function getSVGNode(el) { el = el.node() if(el.tagName.toLowerCase() === 'svg') return el return el.ownerSVGElement } function getNodeEl() { if(node === null) { node = initNode(); // re-add node to DOM document.body.appendChild(node); }; return d3.select(node); } // 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 } // Private - replace D3JS 3.X d3.functor() function function functor(v) { return typeof v === "function" ? v : function() { return v } } return tip }; })); d3-tip.js-0.7.1/package.json000066400000000000000000000012371302225545500155260ustar00rootroot00000000000000{ "name": "d3-tip", "version": "0.7.1", "description": "Tooltips for d3 svg visualizations", "author": "Justin Palmer (http://labratrevenge.com/d3-tip)", "main": "index.js", "directories": { "doc": "docs", "example": "examples" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://github.com/Caged/d3-tip" }, "keywords": [ "d3", "tooltip" ], "license": "MIT", "bugs": { "url": "https://github.com/Caged/d3-tip/issues" }, "homepage": "https://github.com/Caged/d3-tip", "dependencies": { "d3": "^4.2" } }