@primer/react/dist/Tooltip/Tooltip.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React, { useMemo } from 'react';
import classes from './Tooltip.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useId } from '../hooks/useId.js';

const TooltipContext = /*#__PURE__*/React.createContext({});

/**
 * @deprecated
 */
const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
  as: Component = 'span',
  direction = 'n',
  children,
  className,
  text,
  noDelay,
  align,
  wrap,
  id,
  ...rest
}, ref) {
  const tooltipId = useId(id);
  const tooltipClasses = clsx(className, classes.Tooltip, classes[`Tooltip--${direction}`], {
    [classes[`Tooltip--align${align === 'left' ? 'Left' : 'Right'}`]]: align,
    [classes['Tooltip--noDelay']]: noDelay,
    [classes['Tooltip--multiline']]: wrap,
    // maintaining feature parity with old classes
    [`tooltipped-${direction}`]: true,
    [`tooltipped-align-${align === 'left' ? 'left' : 'right'}-2`]: align,
    'tooltipped-no-delay': noDelay,
    'tooltipped-multiline': wrap
  });
  const value = useMemo(() => ({
    tooltipId
  }), [tooltipId]);
  return (
    /*#__PURE__*/
    // This provider is used to check if an icon button is wrapped with tooltip or not.
    jsx(TooltipContext.Provider, {
      value: value,
      children: /*#__PURE__*/jsx(Component, {
        role: "tooltip",
        "aria-label": text,
        id: tooltipId,
        ...rest,
        className: tooltipClasses,
        ref: ref,
        children: children
      })
    })
  );
});
Tooltip.alignments = ['left', 'right'];
Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
Tooltip.__SLOT__ = Symbol('DEPRECATED_Tooltip');

export { TooltipContext, Tooltip as default };