Components

Available Reusable Components

• Tooltip

Quickstart

1. Import module in html template

<script src="{{site.baseurl}}/assets/js/shared/moduleName.js"></script>

2. Invoke the module methods when needed (see API Reference for examples)

API Reference

# tooltipModule.draw(tooltipId, title, information, disclaimers) <>

<div id="tooltip" class="tooltip-module"></div>

function handleMouseOver(d) {
  const formatNumber = d3.format(",d");
  tooltipModule.draw("#tooltip", d.name, {
    Employees: formatNumber(dataByState[d.abbreviation])
  }, "Click to view agency information");
  d3.select(this).style("fill", "#D334BA");
}

# tooltipModule.remove(tooltipId) <>

<div id="tooltip" class="tooltip-module"></div>

function handleMouseOut() {
  tooltipModule.remove("#tooltip");
  d3.select(this).style("fill", d => color(dataByState[d.abbreviation]));
}

# tooltipModule.move(tooltipId) <>

<div id="tooltip" class="tooltip-module"></div>

function handleMouseMove() {
  tooltipModule.move("#tooltip");
}