JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 68
  • Score
    100M100P100Q61579F
  • License MIT

Delicious tooltip component with zero dependencies

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 version NPM license NPM total downloads NPM monthly downloads

See simple demo

Delicious tooltip component with zero dependencies

  • Find visible position and align automatically
  • Hover, Click and Focus logic out of the box
  • Extendable (support custom tooltip logic)
  • Portal to document.body
  • Support multi tooltips
  • With outside click
  • No extra DOM nodes
  • Lightweight

Getting Started

Install:

npm install --save react-tooltpz

Import:

import { TooltipParent, Tooltip, useHoverTooltip } from 'react-tooltpz';

Use:

<TooltipParent tooltips={[useHoverTooltip]}>
    {({ innerRef, tooltipsProps, ...rest }) => (
        <button {...rest} className={theme.button} ref={innerRef}>
            {'Try hover, click and focus'}
        </button>
    )}
    <Tooltip position="bottom" align="center">
        {({ innerRef, parentSize, tooltipSize, setOpened, ...rest }) => (
            <div {...rest} className={theme.tooltip} ref={innerRef}>
                {'Hovered'}
            </div>
        )}
    </Tooltip>
</TooltipParent>

Components

TooltipParent

Render parent

Props

name type default description
innerRef object null parent ref
tooltips array of functions [] tooltips opened logic
children ({ innerRef, ...rest }, { tooltipsProps }) => jsx null parent render function

Tooltip

Render tooltip

Props

name type default description
innerRef object null tooltip ref
parentRef object null parent ref
zIndex number 0 tooltip default zIndex
margin number 4 margin between parent and tooltip
position one of [bottom, top, left, right] bottom tooltip position
align one of [start, center, end] start tooltip align
children ({ innerRef, style, ...rest }, { parentSize, tooltipSize, setOpened } ) => jsx null tooltip render function
style object null tooltip style
setOpened (opened) => void null set tooltip opened state

Hooks

useHoverTolltip

open tooltip by hover

useClickTolltip

open tooltip by click

useFocusTolltip

open tooltip by focus

Building Your Own Hooks

Hooks can accept object with props

name type description
parentRef object parent ref
tooltipRef object tooltip ref

and should return array with two elements

index type description
0 object parent props
1 object tooltip props

tooltip required props

name type description
opened bool tooltip opened state
setOpened function set tooltip opened state

Example

const useSimpleClickTooltip = () => {
    const [opened, setOpened] = useState(false);
    const onClick = useCallback(() => {
        setOpened((value) => !value);
    });

    return [{ onClick }, { opened, setOpened }];
};