JSPM

  • Created
  • Published
  • Downloads 100168
  • Score
    100M100P100Q212538F
  • License MIT

React tippy

Package Exports

  • react-tippy
  • react-tippy/dist/tippy.css

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

Readme

React Tippy

Tooltip for React, using tippy.js

Example

Getting Started

yarn add react-tippy

How to use

First, you need import css

import 'react-tippy/dist/tippy.css'

There are 2 ways for you to use react Tippy

Tooltip Component

import {
  Tooltip,
} from 'react-tippy';


<Tooltip
  // options
  title="Welcome to React"
  position="bottom"
  trigger="click"
>
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload.
  </p>
</Tooltip>

High Order Component

withTooltip(Component, options)

import {
  withTooltip,
} from 'react-tippy';


const Header = () => (
  <h2>Welcome to React with tooltip</h2>
);

const HeaderWithTootip = withTooltip(Header, {
  title: 'Welcome to React with tooltip',
});

Options

Same as options of tippyJS https://atomiks.github.io/tippyjs/#all-settings