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

Getting Started

• Basic Usage:

  import { useState } from 'react';
  import { Tooltip } from 'react-tooltpz';
  
  const TitleWithHoverTooltip = ({ title, tooltip }) => {
      const [opened, setOpened] = useState(false);
      const ref = useRef();
  
      return (
          <div ref={ref} onMouseEnter={() => setOpened(true)} onMouseLeave={() => setOpened(false)}>
              {title}
              {opened && (
                  <Tooltip parentRef={ref}>
                      {({ innerRef, style }) => (
                          <div ref={innerRef} style={style}>
                              {tooltip}
                          </div>
                      )}
                  </Tooltip>
              )}
          </div>
      );
  };
  
  export default TitleWithHoverTooltip;
  

• Installation:

  npm install --save react-tooltpz
  

• Importing:

  import { Tooltip } from 'react-tooltpz';
  

  You also can import directly what you want

  import Tooltip from 'react-tooltpz/lib/Tooltip';
  import useOutsideClick from 'react-tooltpz/lib/useOutsideClick';
  

API

Tooltip

Compute a tooltip coords and render tooltip with PortalNodeContext and ZIndexContext Prefer this component instead of directly use useTooltip hook

Props

name	type	default	description
parentRef	{ current: { getBoundingClientRect } }	required	Tooltip ref object. It can be any object with current prop. current prop should be null or any object with getBoundingClientRect method
innerRef	{ current: { getBoundingClientRect } }	-	Tooltip ref object. Similar to parentRef
zIndex	number	0	Tooltip default z-index
margin	number	4	Margin between parent and tooltip
position	'bottom' / 'top' / 'left' / 'right'	'bottom'	Tooltip position
align	'start' / 'center' / 'end'	'start'	Tooltip align
children	({ innerRef, style }, { parentRect, tooltipRect } ) => ReactNode	-	Tooltip render function
style	object	-	Tooltip style object
portalNode	HTMLElement	-	second parameter for ReadDOM.createPortal

---

Portal

Create a portal with PortalNodeContext. Prefer this component instead of directly use createPortal

Props

name	type	default	description
children	ReactNode	-	first parameter for ReadDOM.createPortal
portalNode	HTMLElement	-	second parameter for ReadDOM.createPortal

---

PortalNodeContext

provide portalNode to Tooltip and Portal

---

ZIndexContext

provide zIndex to Tooltip

---

useTooltip

Compute a tooltip coords

Parameters:

• parentRef: similar to Tooltip parentRef
• tooltipRef: similar to Tooltip innerRef
• options?: { margin?, position?, align? }

Returns array with:

• coords: { top, left } | null
• parentRect: { top, left, bottom, right, width, height } | null
• tooltipRect: { top, left, bottom, right, width, height } | null

useOutsideClick

Handle a click outside of element with portal support

const onMouseDownOrTouchStart = useOutsideClick(onOutsideClick);

Parameters:

• onOutsideClick?: (event): void - "onOutsideClick" handler

Returns:

• onMouseDownOrTouchStart: (event): void - onMouseDown or onTouchStart handler