Package Exports

react-tooltpz

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

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

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