JSPM

react-tooltip

5.7.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1328532
  • Score
    100M100P100Q224607F
  • License MIT

react tooltip component

Package Exports

  • react-tooltip
  • react-tooltip/dist/react-tooltip.cjs.min.js
  • react-tooltip/dist/react-tooltip.css
  • react-tooltip/dist/react-tooltip.esm.js
  • react-tooltip/dist/react-tooltip.esm.min.js

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-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-tooltip

Version typescript code style: prettier npm download minified minified gzip

If you like the project, please give the project a GitHub 🌟

Demo

Edit ReactTooltip

Documentation for V4 - Github Page.

Documentation for V5 - ReactTooltip.

Bundle size timeline comparation from V4 -> V5

Bundlephobia comparison

Installation

npm install react-tooltip

or

yarn add react-tooltip

Usage

Using NPM

1 . Import the CSS file to set default styling

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

This needs to be done only once. We suggest you do it on your src/index.js or equivalent file.

2 . Import react-tooltip after installation

import { Tooltip } from 'react-tooltip'

or if you want to still use the name ReactTooltip as V4:

import { Tooltip as ReactTooltip } from 'react-tooltip'

3 . Add data-tooltip-content="your placeholder" to your element

<p id="my-element" data-tooltip-content="hello world">
  Tooltip
</p>

4 . Include react-tooltip component

<ReactTooltip anchorId="my-element" />

Standalone

You can import node_modules/react-tooltip/dist/react-tooltip.[mode].js into your page. Please make sure that you have already imported react and react-dom into your page.

mode: esm cjs umd

Don't forget to import the CSS file from node_modules/react-tooltip/dist/react-tooltip.css to set default styling. This needs to be done only once in your application.

PS: all the files have a minified version and a non-minified version.

image

Options

For all available options, please check React Tooltip Options

Security Note

The html option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like sanitize-html. We chose not to include sanitization after discovering it increased our package size too much - we don't want to penalize people who don't use the html option.

JSX Note

You can use React's renderToStaticMarkup-function to use JSX instead of HTML. Example:

import ReactDOMServer from 'react-dom/server';
[...]
<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
  Hover me
</p>

Note

  • id is necessary, because <ReactTooltip anchorId="my-element" /> finds the tooltip via this attribute

Article

How I insert sass into react component

Maintainers

danielbarion Maintainer - Creator of React Tooltip >= V5.

gabrieljablonski Maintainer.

aronhelser (inactive).

alexgurr (inactive).

pdeszynski (inactive).

roggervalf (inactive).

huumanoid (inactive)

wwayne (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)

We would gladly accept a new maintainer to help out!

Contributing

We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our contributing doc has some details.

License

MIT