React Tooltpz

Low-level component for creating menus, tooltips, hints, dropdown and other popups

💬 Flexible Tooltip Components with zero dependencies

• Automatically find best position
• With Portal
• No extra DOM nodes
• Tiny

Try demo

Basic Usage:

import { useState } from 'react';
import { Tooltip } from 'react-tooltpz';

type Props = {
    title: string;
    tooltip: string;
};

const TitleWithHoverTooltip = ({
  title,
  tooltip,
}: Props) => {
  const [opened, setOpened] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);

  return (
    <div
      ref={ref}
      onMouseEnter={() => setOpened(true)}
      onMouseLeave={() => setOpened(false)}
    >
      {title}
      {opened && (
        <Tooltip parentRef={ref}>
          {({ ref, style }) => (
            <div ref={ref} style={style}>
              {tooltip}
            </div>
          )}
        </Tooltip>
      )}
    </div>
  );
};

Installation:

npm install --save react-tooltpz

Importing:

import { Tooltip } from 'react-tooltpz';

Advanced usage

Using parent width

import { useState } from 'react';
import { Tooltip } from 'react-tooltpz';

type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
    options?: string[];
    onChange?: (nextValue: string) => void;
};

const Autocomplete = ({
  ...inputProps,
  options,
  onChange,
}: Props) => {
  const [opened, setOpened] = useState(false);
  const [focused, setFocused] = useState(false);
  const ref = useRef<HTMLInputElement | null>(null);

  return (
    <>
      <input
        {...inputProps}
        ref={ref}
        onChange={(event) =>
          onChange(event.target.value)
        }
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
      />
      {focused && !!options?.length && (
        <Tooltip parentRef={ref}>
          {({ ref, style }, { parentRect }) => (
            <div
              ref={ref}
              style={{
                ...style,
                width: parentRect?.width,
              }}
            >
              {options.map((option) => (
                <div
                  onClick={() => onChange(option)}
                >
                  {option}
                </div>
              ))}
            </div>
          )}
        </Tooltip>
      )}
    </>
  );
};

API

Tooltip

Props

type Props = {
  parentRef: MutableRefObject<AnyWithGetBoundingClientRect / null>;
  innerRef?: MutableRefObject<AnyWithGetBoundingClientRect / null>;
  margin?: number;
  position?: Position;
  align?: Align;
  allowedPositions?: Position[];
  children?: (
          props: { ref: MutableRefObject<AnyWithGetBoundingClientRect / null>; style: CSSProperties },
          additionalData?: { parentRect: Rect / null; tooltipRect: Rect / null },
  ) => ReactNode;
  style?: CSSProperties;
  zIndex?: number;
  portalNode?: HTMLElement;
  withParentRect?: boolean;
  withTooltipRect?: boolean;
};

| name | type | default | description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | parentRef | MutableRefObject<AnyWithGetBoundingClientRect / null> | required | Tooltip ref object.It can be any object with current prop.current prop should be null or any object with getBoundingClientRect method | | innerRef | MutableRefObject<AnyWithGetBoundingClientRect / null> | - | Tooltip ref object.Similar to parentRef | | margin | number | 4 | Margin between parent and tooltip | | position | 'bottom' / 'top' / 'left' / 'right' | 'bottom' | Tooltip position | | align | 'start' / 'center' / 'end' | 'start' | Tooltip align | | allowedPositions | ('bottom' / 'top' / 'left' / 'right')[] | [] | Tooltip allowed positions array. Empty value means all positions are allowed. | | children | (props: { ref: MutableRefObject<AnyWithGetBoundingClientRect / null>; style: CSSProperties },additionalData?: { parentRect: Rect / null; tooltipRect: Rect / null }) => ReactNode | - | Tooltip render function | | style | CSSProperties | - | Tooltip style object | | zIndex | number | 0 | Tooltip default z-index | | portalNode | HTMLElement | - | second parameter for ReadDOM.createPortal | | withParentRect | boolean | - | If true parentRect prop of second parameter of children will be updated | | withTooltipRect | boolean | - | If true tooltipRect prop of second parameter of children will be updated |

PortalNodeContext

provide portalNode to Tooltip

export const PortalNodeContext: React.Context<HTMLElement | null>;

ZIndexContext

provide zIndex to Tooltip

export const ZIndexContext: React.Context<number>;