@redsift/d3-rs-tip

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