Customizing Tooltips

To turn on simple interactivity for any frame:

• set the hoverAnnotation property to true
• add this CSS to your app CSS:

 .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;
 }

Semiotic automatically creates a voronoi of hoverable regions on your chart. 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  --!>
<ORFrame
   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.

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 className="tooltip-content" ><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>}
/>

Tooltips are processed along with any other annotation, so you can override them by writing custom annotation rules to handle the frame-hover or column-hover event.