JSPM – react-aria-tooltip@0.1.3

Package Exports

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

Readme

Simple ReactJS component that adds the appropriate role, identification structure, and aria-hidden attribute for a tooltip.

Installation

npm install react-aria-tooltip

Usage

import ReactARIAToolTip from 'react-aria-tooltip'

return (
    <ReactARIAToolTip message="You custom message">
        <sometagorcomponent></sometagorcomponent>
    </ReactARIAToolTip>
)

You will also need to include the tooltip css path into your application in some form.

CSS @import

Import the package css file relative to your node_modules directory.

Example

@import "../../../node_modules/react-aria-tooltip/dist/react-tooltip.min.css";

Options

message string that will display in the tooltip
eventType this can either be 'click' or 'hover'
direction the placement of the tooltip. Can be one of four options 'top', 'bottom', 'right', 'left'
duration this is only applicable to the click eventType. This value defines the amount of time the tooltip is present after the user clicks the target element

Examples

<ReactARIAToolTip message="Tooltip text" eventType="hover" direction="bottom">
    <span>Some text</span>
</ReactARIAToolTip>

<ReactARIAToolTip message="Something fancy" eventType="click" duration="500">
    <img src="../path/to/some/image" alt="" title="" />
</ReactARIAToolTip>

react-aria-tooltip