@cruise-automation/tooltip v0.0.7

@cruise-automation/tooltip

Floating tooltip React component, for usage across Cruise projects.

Usage

Install: npm install --save @cruise-automation/tooltip.

It can render any React.Node within itself. It comes with a wrapper component you can use to add tooltips to existing html elements, and an imperative API to absolutely position the tooltip for interacting with non-element based things (image hitmaps, charts, webgl).

The tooltip container element has basic css applied for absolute positioning. It also has an unused global className of tooltip so you can apply custom styles globally in your application. e.g. .tooltip { border-radius: 5px, padding: 10px, border: 1px solid pink } in your css.

The react "wrapper" component API looks like so:

<Tooltip contents="This is the tooltip contents" fixed delay>
  <div>Mouse over this and after 500 milliseconds a tooltip will show</div>
</Tooltip>

The imperative API looks like so:

const MyComponent = (props) => {
  const showTip = (e) => {
    Tip.show(
      e.clientX,
      e.clientY,
      <div>
        `Your mouse is at ${e.clientX}, ${e.clientY}
      </div>,
      { offset: 20 }
    );
  };

  return (
    <div onMouseMove={showTip} onMouseLeave={Tooltip.hide}>
      Mouse over to show a tooltip
    </div>
  );
};

API

Tooltip.show(x: number, y: number, contents: React.Node, options: { offset: number })

Shows the tooltip at x, y with the contents rendered into the body of the tooltip. An optional offset can be supplied to move the tooltip offsetpx away from the mouse. The tooltip will attempt to render within the viewport, so if it is rendered near the bottom edge of the screen it will shift to the left / top of the mouse (plus the offset) accordingly.

Tooltip.hide()

Hides the tooltip

Props