src/components/elements/Tooltip/tooltip.jsx

import React from "react";
import cx from "classnames";
import css from "./tooltip.module.scss";

/**
 * Enum for class direction values.
 *
 * @readonly
 * @enum {string}
 */
const TOOLTIP_DIRECTIONS = {
  BOTTOM: "bottom",
  LEFT: "left",
  RIGHT: "right",
  TOP: "top",
};

/**
 * Select the css class to suffix the main class which will apply direction specific styling
 *
 * @param {string} dir - Direction to render tooltip. Valid values are top, bottom, right, left. Default is top
 */
const directionClass = (dir = TOOLTIP_DIRECTIONS.TOP) => {
  switch (dir) {
    case TOOLTIP_DIRECTIONS.LEFT:
      return css.left;
    case TOOLTIP_DIRECTIONS.RIGHT:
      return css.right;
    case TOOLTIP_DIRECTIONS.BOTTOM:
      return css.bottom;
    default:
      return css.top;
  }
};

/**
 * Renders a tooltip that only appears whne the child of this component is rendered
 *
 * @todo Implement the arrow rendering for a tooltip based on direction
 * @param {object} props
 * @param {object} props.children - The element that should have the tool tip rendered when hover
 * @param {string} props.direction - Direction to render tooltip. Valid values are top, bottom, right, left. Default is top
 * @param {string} props.message - Message to be displayed in the tooltip
 * @param {string} props.className - classnames
 */
const Tooltip = ({
  children,
  direction = TOOLTIP_DIRECTIONS.TOP,
  message,
  className,
}) => (
  <span
    className={cx(css.tooltip, directionClass(direction), className)}
    data-tooltip={message}
  >
    {children}
  </span>
);

export default Tooltip;