Skip to content

React Component for rapidly developing Tooltip components, without worrying about accessibility.

Notifications You must be signed in to change notification settings

ryami333/react-accessible-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Accessible Tooltip · GitHub license NPM release Code coverage

Try out the interactive demo here.

React Accessible Tooltip is a component which lets you build accessible tooltips. It handles all the interactivity and accessibility stuff, but keeps out of the way so you can use whatever markup and styling you want.

Basic usage requires you to pass 'label' and 'overlay' render functions. React Accessible Tooltip passes you both the state of the tooltip (isHidden) and an object full of properties you should spread across your components (labelAttributes, overlayAttributes).

Getting started

Installation

Install this package and it's co-dependencies:

npm install react-accessible-tooltip react react-dom

Basic Usage

import { Tooltip } from "react-accessible-tooltip";
<Tooltip
  label={(props) => (
    <span {...props.labelAttributes} className="tooltip-label">
      {`hover me for info`}
    </span>
  )}
  overlay={(props) => (
    <span
      {...props.overlayAttributes}
      className={
        props.isHidden
          ? "tooltip-overlay tooltip-overlay--hidden"
          : "tooltip-overlay"
      }
    >
      {`this is more info`}
    </span>
  )}
/>

Props

label : function({ isHidden, labelAttributes, requestHide, requestShow, requestToggle }) => React.Node

The label prop should be passed a render function. The function will be called with these arguments:

Property Type Description
isHidden boolean The current state of the tooltip.
labelAttributes object The various attributes which ought to be assigned to the outer-most element in your render function (eg. <span {...labelAttributes} />).
requestHide function Callable which manually sets the state of the tooltip to 'hidden'.
requestShow function Callable which manually sets the state of the tooltip to 'shown'.
requestToggle function Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'.

overlay : function({ isHidden, overlayAttributes, requestHide, requestShow, requestToggle }) => React.Node

The overlay prop should be passed a render function. The function will be called with these arguments:

Property Type Description
isHidden boolean The current state of the tooltip.
overlayAttributes object The various attributes which ought to be assigned to the outer-most element in your render function (eg. <span {...overlayAttributes} />).
requestHide function Callable which manually sets the state of the tooltip to 'hidden'.
requestShow function Callable which manually sets the state of the tooltip to 'shown'.
requestToggle function Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'.

License

MIT.

About

React Component for rapidly developing Tooltip components, without worrying about accessibility.

Resources

Stars

Watchers

Forks

Packages

No packages published