@redsift/d3-rs-tip NPM

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\|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