JSPM – react-accessible-tooltip@1.2.14

Package Exports

react-accessible-tooltip

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-accessible-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Try out the interactive demo here.

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.

react-accessible-tooltip