JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 362
  • Score
    100M100P100Q116373F
  • License MIT

Tip for graphs using D3v4.

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

Circle CI

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