Package Exports

react-tooltpz
react-tooltpz/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tooltpz) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Tooltpz

NPM license

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

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

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>;

react-tooltpz