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