Customizing Tooltips

To turn on simple interactivity for any frame, set the hoverAnnotation property to true. This will overlay on your chart hoverable regions (using voronoi for points or columns for basic hover behavior in ORFrame). For ORFrame, if you'd prefer to have hover enabled for individual pieces, you can set pieceHoverAnnotation to true.

<!-- Point hovering for XYFrame or NetworkFrame and column hovering for ORFrame  --!>
<XYFrame
   hoverAnnotation={true}
/>

<!-- Point hovering for ORFrame  --!>
<XYFrame
   pieceHoverAnnotation={true}
/>

As you hover over the chart, you will see a simple HTML tooltip as well as an SVG circle over the point you're hovering. The following CSS will make those tooltips look like a simple bordered white with a triangle pointing to the hovered spot:

 .tooltip-content {
  background: white;
  border: 1px solid black;
  color: black;
  padding: 10px;
  z-index: 99;
  min-width: 120px;
 }

 .tooltip-content:before {
  background: white;
  content: '';
  padding: 0px;
  transform: rotate(45deg);
  width: 15px;
  height: 15px;
  position: absolute;
  z-index: 99;
 }

By default, tooltips will show minimal information. If you want to adjust the content of a tooltip, use tooltipContent to create HTML JSX elements that you want to populate the tooltip:

<XYFrame
   tooltipContent={d => <div><p>Name: {d.name}</p><p>Salary: {d.salary}</p><p>Date: {d.timestamp.toString()}</p></div>}
/>

If you're ambitious, you could even drop another frame in the tooltip to show data visualization on hover:

<XYFrame
   tooltipContent={d => <div><p>Bar Chart for: {d.name}</p>
      <ORFrame
         data={d.evaluation}
         oAccessor={"category"}
         rAccessor={"level"}
         oLabel={true}      
      /></div>}
/>