@mapbox/react-tooltip NPM

@mapbox/react-tooltip

A tooltip. Wrap this component around content, and when the user hovers over or focuses over that content, the tooltip will appear.

Note: For accessibility, the content (trigger element) the Tooltip wraps itself over is passed a triggerProps argument containing attributes that should be applied to the outermost trigger element.

Note: For the tooltip to work predictably, the trigger element should not have block positioning as its width is not factored into the position of the tooltips arrow element.

import Tooltip from '@mapbox/react-tooltip';

<Tooltip content="Basic">
  {triggerProps => {
    return (
      <button {...triggerProps}>
        Basic
      </button>
    );
  }
</Tooltip>