JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 70
  • 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, useHoverTooltip } from 'react-tooltpz';

Use:

<TooltipParent
    tooltips={[
        ({ innerRef, parentSize, tooltipSize, ...rest }) => (
            <div {...rest} ref={innerRef}>
                {'Hovered'}
            </div>
        )
    ]}
    tooltipsLogic={[useHoverTooltip]}
>
    {({ innerRef, ...rest }) => (
        <button {...rest} ref={innerRef}>
            {'Try hover'}
        </button>
    )}
</TooltipParent>

Components

TooltipParent

Base component

Props

name type default decription
innerRef object null parent ref
tooltips array of function [] array of tooltips render function
tooltipsLogic array of function [] array of tooltips logic hook
children ({ innerRef, ...rest }) => jsx null parent render function

Tooltip

Under TooltipParent hood

Props

name type default decription
innerRef object null tooltip ref
parentRef object null parent ref
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
positions array of [bottom, top, left, right] or null null supported tooltip positions
aligns array of [start, center, end] or null null supported tooltip aligns
children ({ innerRef, style, parentSize, tooltipSize, ...rest }) => jsx null tooltip render function
style object null tooltip style

Hooks

useHoverTolltip

open tooltip by hover

useClickTolltip

open tooltip by click

useFocusTolltip

open tooltip by focus

Fabrics

fabricTooltipParent

fix tooltipsLogic prop for TooltipParent

Params

(tooltipsLogic) => TooltipParentWithTooltipsLogic

fabricUseHoverTooltip

extend Tooltip props for useHoverTooltip

Params

(options) => useHoverTooltipWithOptions

fabricUseClickTooltip

extend Tooltip props for useClickTooltip

Params

(options) => useClickTooltipWithOptions

fabricUseFocusTooltip

extend Tooltip props for useFocusTooltip

Params

(options) => useFocusTooltipWithOptions