Package Exports
- @redsift/d3-rs-tip
- @redsift/d3-rs-tip/dist/d3-rs-tip.esm.js
- @redsift/d3-rs-tip/dist/d3-rs-tip.umd.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@redsift/d3-rs-tip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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. This component is dependent on D3 v4 (Alpha).
Builds
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 |
style | Sets or gets a style value | same as d3 e.g. style('key',`value |
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 |