https://github.com/redsift/d3-rs-tip
https://github.com/redsift/d3-rs-tip
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/redsift/d3-rs-tip
- Owner: redsift
- License: mit
- Created: 2016-06-13T17:04:55.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-03-16T14:57:13.000Z (about 2 years ago)
- Last Synced: 2025-02-15T14:34:46.706Z (over 1 year ago)
- Language: HTML
- Size: 1.29 MB
- Stars: 0
- Watchers: 18
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-rs-tip
`d3-rs-tip` is a component for adding tooltips in charts made with D3, an extension of Justin Palmer's [d3-tip](https://github.com/Caged/d3-tip). This component is dependent on D3 v4 (Alpha).
## Builds
[](https://circleci.com/gh/Redsift/d3-rs-tip)
UMD from //static.redsift.io/reusable/d3-rs-tip/latest/d3-rs-tip.umd-es2015.min.js
## Usage
### ES6
```
import { body as tip } from "@redsift/d3-rs-tip";
var rtip = tip()
.html(d => d.text)
elmS.call(rtip);
node.on('mouseover', rtip.show)
.on('mouseout', rtip.hide)
...
```
If using rollup.js for a browser target, ensure `d3-rs-tip` is part of the global map.
### Require
```
var d3Tip = require("@redsift/d3-rs-tip");
var eml = d3Tip.body();
...
```
### Parameters
|Name|Description| Expected Value|
|----|-----------| --------------|
|attr|Sets or gets attribute value| same as d3 e.g. attr('key',`value|function`)
|style| Sets or gets a style value| same as d3 e.g. style('key',`value|function`)
|direction| Sets or gets direction of the tooltip| one of `n`,`s`,`e`,`w`,`nw`,`sw`,`ne`,`se`
|style| Sets or gets the CSS wrapped with the component| string of CSS properties
|parent| Sets or gets the parent element the tip will be appended to| DOM Node (default: `body`)
transition| Causes the tip to fade in `boolean|number`. If a number, the value is set at the time for the fade