d3-tip.js-0.7.1/ 0000775 0000000 0000000 00000000000 13022255455 0013235 5 ustar 00root root 0000000 0000000 d3-tip.js-0.7.1/.gitignore 0000664 0000000 0000000 00000000100 13022255455 0015214 0 ustar 00root root 0000000 0000000 components
bower_components
node_modules
d3-tip.min.*
/.project
d3-tip.js-0.7.1/LICENSE 0000664 0000000 0000000 00000002066 13022255455 0014246 0 ustar 00root root 0000000 0000000 The 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/Makefile 0000664 0000000 0000000 00000000640 13022255455 0014675 0 ustar 00root root 0000000 0000000 UGLIFYJS = 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.md 0000664 0000000 0000000 00000002332 13022255455 0014514 0 ustar 00root root 0000000 0000000 # d3.tip: Tooltips for d3.js visualizations
[](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.json 0000664 0000000 0000000 00000000366 13022255455 0015253 0 ustar 00root root 0000000 0000000 {
"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/ 0000775 0000000 0000000 00000000000 13022255455 0014165 5 ustar 00root root 0000000 0000000 d3-tip.js-0.7.1/docs/index.md 0000664 0000000 0000000 00000001367 13022255455 0015625 0 ustar 00root root 0000000 0000000 # 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.md 0000664 0000000 0000000 00000001210 13022255455 0021046 0 ustar 00root root 0000000 0000000 [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.md 0000664 0000000 0000000 00000002637 13022255455 0020734 0 ustar 00root root 0000000 0000000 [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.md 0000664 0000000 0000000 00000001353 13022255455 0022042 0 ustar 00root root 0000000 0000000 [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.md 0000664 0000000 0000000 00000001213 13022255455 0022573 0 ustar 00root root 0000000 0000000 [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.md 0000664 0000000 0000000 00000000355 13022255455 0021465 0 ustar 00root root 0000000 0000000 [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/ 0000775 0000000 0000000 00000000000 13022255455 0015053 5 ustar 00root root 0000000 0000000 d3-tip.js-0.7.1/examples/arrow-styles.html 0000664 0000000 0000000 00000004560 13022255455 0020421 0 ustar 00root root 0000000 0000000