Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-tooltip

ReactTooltip5.6mMIT5.28.1TypeScript support: included

react tooltip component

react, react-component, tooltip, react-tooltip

readme

react-tooltip

Version typescript code style: prettier npm download minified minified gzip

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

Why do we show ads on our docs?

  • ReactTooltip is an open source project, this is the way we found to be financed by the community.

Demo

Edit ReactTooltip

Documentation for V4 - Github Page.

Documentation for V5 - ReactTooltip.

Installation

npm install react-tooltip

or

yarn add react-tooltip

Sponsors

Gold Sponsors 🌟

Frigade

React Tooltip is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

Silver Sponsors ✪

Powered by

Usage

1 . Import the CSS file to set default styling.

[!WARNING]\ If you are using a version before than v5.13.0, you must import the CSS file or the tooltip won't show!

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

This needs to be done only once and only if you are using a version before than 5.13.0. 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-id="<tooltip id>" and data-tooltip-content="<your placeholder>" to your element.

data-tooltip-id is the equivalent of V4's data-for.

<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
  ◕‿‿◕
</a>

4 . Include the <Tooltip /> element.

[!NOTE]\ Don't forget to set the id, it won't work without it!

<Tooltip id="my-tooltip" />

Troubleshooting

Before trying these, make sure you're running the latest ReactTooltip version with

npm install react-tooltip@latest

or

yarn add react-tooltip@latest

Please check our troubleshooting section on our docs.

If you can't find your problem here, make sure there isn't an open issue already covering it. If there isn't, feel free to submit a new issue.

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

changelog

This CHANGELOG is related to version 4 of ReactTooltip

We created the entire project from scratch to build v5, the flow was changed and now the changelog of version 5 is in Github Releases.

4.5.1 (2022-11-23)

Bug Fixes

  • Fixed tooltip arrow center position (13f6e75)

4.5.0 (2022-11-09)

Features

  • add disable internal style prop into react-tooltip.d.ts as feat to trigger semantic-release (ce41c47), closes #811

4.4.5 (2022-11-09)

Bug Fixes

4.4.4 (2022-11-09)

Bug Fixes

  • Fixed the tooltip arrow overlapping tooltip content (51c7e1a)

4.4.3 (2022-10-22)

Bug Fixes

  • use double quotes instead of single quotes in sass (b19ebcb)
  • use double quotes instead of single quotes in sass (1f776ac)

4.4.2 (2022-10-18)

Bug Fixes

  • revert the flow to do a release from master branch (03b7c4e)

4.4.0 (2022-10-13)

Features

  • add borderClass prop to allow a custom border class (2eec877)
  • add borderClass prop to allow a custom border class [skip-ci] (9844a6c)

Reverts

  • revert the upgrade in uuid as it was breaking the examples page (71afd00)

4.3.1 (2022-10-13)

Bug Fixes

  • add validation before call callbackAfter function as function (aae936e)

4.3.0 (2022-10-12)

Bug Fixes

Features

4.2.21 (2021-05-28)

Bug Fixes

  • compability: add polyfill and change styles (#706) (b6e9a1c)

4.2.20 (2021-05-28)

Bug Fixes

  • add aria hidden attribute to style tag (#703) (d60c2b7)

4.2.19 (2021-05-06)

Bug Fixes

  • src/index.js: hide tooltip if blurred (tabbed out) (#699) (e0a2a1d)

4.2.18 (2021-04-25)

Bug Fixes

  • src/index.js: add accessibility support for tabbing (#695) (ae936a5)

4.2.17 (2021-03-26)

Bug Fixes

4.2.16 (2021-03-26)

Bug Fixes

  • index.js: fix exception when testing with Jest (#682) (f885f1f)

4.2.15 (2021-02-26)

Bug Fixes

  • do not delay show if tooltip is already shown (#676) (e8b9d84)

4.2.14 (2021-02-16)

Bug Fixes

4.2.13 (2021-01-15)

Bug Fixes

  • domexception: revert previous changed for unexpected behavior (85e38bb), closes #667

4.2.12 (2021-01-14)

Bug Fixes

  • style injection: change style injection default root (a00c5b7), closes #665

4.2.11 (2020-11-22)

Bug Fixes

  • styles: add styles for shadow dom (00d1539), closes #597

4.2.10 (2020-09-14)

Bug Fixes

  • build: removing single quotes on cpy for windows shell (#632) (9c280af)

4.2.9 (2020-08-27)

Bug Fixes

  • getposition: properly determine parents with will-change: transform (3a76250)

4.2.8 (2020-08-06)

Bug Fixes

  • showtooltip: check if tooltipRef is undefined (#623) (f63eab2)

Change Log

v3.9.0 (2018/11/07 00:43 +00:00)

  • #452 docs(README.md): Updates demo url (@tjFogarty)
  • #439 added support for passing options to sanitizeHtml (@icheishvili)
  • #433 Use capture mode with globalEventOff (@apandichi)

v3.8.4 (2018/09/12 18:00 +00:00)

  • #428 fix(example):

    warning from react, make text match code. (@aronhelser)

v3.8.3 (2018/09/12 13:47 +00:00)

  • #426 perf(Use sanitize-html-react instead of sanitize-html) (@jgerlier)
  • #425 fix(index.js): fix state initialization (@MtBlue81)

v3.8.2 (2018/09/11 17:55 +00:00)

  • #413 fix(index.js): Use correct orientation when mouse enters (@an4ger)

v3.8.1 (2018/09/06 14:07 +00:00)

  • #422 fix(tooltip): sanitize HTML to prevent XSS (@wichniowski)

v3.7.0 (2018/09/03 15:13 +00:00)

  • #416 feat(mouseover): Add ability to hover on tooltip. (@RobertGary1)
  • #414 Fixed jsdoc return typos (@AlexanderEllis)
  • #399 Fixes Typos (@jstettner)
  • #391 fix(positioning): make sure tooltip is oriented correctly when close to edge (@hassanbot)

v3.6.1 (2018/06/05 13:46 +00:00)

  • #389 fix(isCapture): guard use of currentTarget (@aronhelser)
  • #384 Detach custom event listener (@P0lip)

v3.6.0 (2018/05/15 18:03 +00:00)

  • #360 Compute or enrich tip content (@austil)

v3.5.1 (2018/05/03 18:11 +00:00)

  • #380 fix(examples): add SVG example (@P0lip)
  • #379 ci(gh-pages): Allow travis to publish new examples to github (@aronhelser)
  • #366 Make getPosition() calculate offsets correctly for svg elements (@P0lip)
  • #310 Update position with content (@stefanhayden)
  • #368 Fix issue where tooltip won't show for adjacent elements. (@tishihar94)
  • #376 Add displayName (@clehnert-psl)
  • #375 test(scrolling): Add example showing tooltip inside scrolling div (@aronhelser)

v3.5.0 (2018/04/11 18:04 +00:00)

  • #281 Get tooltip content dynamically in the render method (@alfonsomunozpomer)

v3.4.3 (2018/04/11 15:14 +00:00)

  • #207 Return tooltip to original position when possible (@hassanbot)
  • #301 insert css as first to allow easy css styling without important (@roblan)

3.4.2 (2018/04/09 18:58 +00:00)

  • #373 fix(example): 'made dev' works again, small fixes. (@aronhelser)
  • #337 Fix README show tip usage error (@sivagao)
  • #359 License should use H2 as the previous sections do (@konekoya)

3.4.1 (2018/04/05 17:24 +00:00)

  • #369 fix(index.js): add missing argument so tooltip hides. (@aronhelser)
  • #372 Travis: update node version to fix travis build. (@aronhelser)

3.4.0 (2017/10/16 13:39 +00:00)

  • #321 React 16 support (@mikecousins)

3.3.1 (2017/10/05 05:08 +00:00)

  • #292 Fix typo (@piperchester)

3.3.0 (2017/04/14 03:34 +00:00)

  • #287 Use prop-types package instead of React.PropTypes (@ssilve1989)

3.2.10 (2017/03/28 20:41 +00:00)

  • #278 Make MutationObserver-based removal tracking (@huumanoid)
  • #272 Fix wrapper tag (@huumanoid)
  • #259 Track removal of DOM elements (@antoniogiordano)
  • #270 Fix typos and improve for clarity (@theholla)

3.2.9 (2017/03/20 15:41 +00:00)

  • #236 escape backslash in getTargetArray method (@rnons)

3.2.7 (2017/02/17 07:24 +00:00)

  • #262 Fix nodelist converte in safari (@wwayne)
  • #260 Fix NodeList to Array convertion (@huumanoid)

3.2.6 (2017/02/08 12:34 +00:00)

  • #255 (fix) Remove console logs (@flexpert)
  • #254 Add support for className prop (@jonbeller)

3.2.4 (2017/02/07 03:57 +00:00)

  • #251 Dropfen dynamic wrapper (@dropfen)

3.2.3 (2017/01/30 03:00 +00:00)

  • #247 Fix delayHide issue #246 (@huumanoid)
  • #238 Update README.md (@nikbelikov)
  • #233 Added more syntax highlighting (@oyeanuj)
  • #229 Replaced Object.keys(...) by Object.getOwnPropertyNames(...) (@gauthierj)

3.2.2 (2016/11/23 08:23 +00:00)

  • #220 Use parameter 'useCapture' for remove listener if it is registered as… (@achernetsky)
  • #223 Fix/security csp style src (@briantrice)
  • #216 Fix fire of global show event for IE (@SubVersive)

3.2.1 (2016/09/30 09:51 +00:00)

  • #202 Hide tooltip when getContent return null or undefined, same for empty… (@wwayne)
  • #201 Hide tooltip if the tip is empty or disabled (@wwayne)

3.2.0 (2016/09/30 01:10 +00:00)

  • #200 Remove countTransform because the way of transform calculation is cha… (@wwayne)
  • #195 Use node parent when calculating offset (@iamdoron)

3.1.8 (2016/09/14 13:37 +00:00)

  • #194 Add resizeHide option (@wwayne)
  • #193 hide specific tooltip (@wwayne)
  • #192 Create scroll hide option (@wwayne)

3.1.7 (2016/09/07 00:46 +00:00)

  • #187 Add disable option (@wwayne)
  • #183 Remove react-dom from Bower dependencies (@mikkopiu)

3.1.6 (2016/08/19 02:07 +00:00)

  • #181 Judge if the component has been mounted mount in getContent #180 (@wwayne)
  • #179 Add bower.json (@mikkopiu)

3.1.5 (2016/08/04 10:43 +00:00)

  • #176 Support ReactTooltip.show() #47 (@wwayne)
  • #174 Factor transform in css into position calculation #152 (@wwayne)

3.1.4 (2016/08/03 13:52 +00:00)

  • #173 Add new attribute afterShow and afterHide (@wwayne)
  • #172 Add support for aria- and role props #159 (@wwayne)

3.1.3 (2016/08/01 23:53 +00:00)

  • #164 Fix for delayShwo #163 (@wwayne)

3.1.2 (2016/07/30 01:38 +00:00)

  • #162 Fix for #158, getposition error (@wwayne)

3.1.1 (2016/07/27 13:03 +00:00)

  • #151 Update postion calculation so that it can calculate continous tootlip (@wwayne)

3.1.0 (2016/07/27 08:49 +00:00)

  • #149 Update algorithm for get positon to fix the shake problem #146 (@wwayne)
  • #145 fix typo (@meandavejustice)

3.0.13 (2016/07/14 09:53 +00:00)

  • #136 Check if current element is under transform (@CremaFR)
  • #135 Transform 3d (@wwayne)

3.0.10 (2016/07/12 00:28 +00:00)

  • #132 Make getContent to support dynamical generate content while hover (@wwayne)
  • #131 Add possibility to recalculate content on show tooltip (@pokidovea)
  • #128 Correct Typos in README.md (@gottsohn)

3.0.7 (2016/06/24 13:58 +00:00)

  • #124 Consider both vertical and horizontal into place re-calculation (@wwayne)

3.0.6 (2016/06/23 01:08 +00:00)

  • #122 Fixed "Wrong query selector for data-tip #121" (@neciu)

3.0.5 (2016/06/21 00:32 +00:00)

  • #120 Fix custom event with specific id (@wwayne)

3.0.4 (2016/06/17 10:28 +00:00)

  • #117 Improve deploy process (@wwayne)

3.0.0 (2016/06/16 12:39 +00:00)

  • #115 Improve structure (@wwayne)
  • #106 Workaround for fixed elements inside transformed elements (@nd0ut)

2.0.3 (2016/06/01 13:45 +00:00)

  • #112 Add custom event to hide tooltip (@wwayne)
  • #103 Allow user to specify separate off event for the tooltip (@ondy1985)

2.0.2 (2016/05/19 10:01 +00:00)

  • #104 Ensure data-html is converted to bool type (@antoniodgonzalez)

2.0.1 (2016/05/14 00:32 +00:00)

  • #102 Clear hide timeout on component unmount (@oluckyman)
  • #100 correct spelling error (@SashaBayan)
  • #99 Simplify setting Sstate in the showTooltip (@Kiwka)

2.0.0 (2016/04/29 01:07 +00:00)

  • #96 New attribute isCapture, deprecate eventPropagationMode (@wwayne)

1.2.1 (2016/04/23 00:16 +00:00)

  • #95 Added ability to change event propagation mode from default "bubble" to "capture" (@aweber1)
  • #93 Upgrade classnames to ^2.2.0 (@petrbrzek)
  • #92 Update peer dependencies to support react / react-dom >= 15.0.0 (@cchamberlain)

v1.1.3 (2016/03/10 12:57 +00:00)

  • #84 Add logic to handle outside cases for solid tooltips #83 (@andrejunges)
  • #81 Fix typo (@robzolkos)

v1.1.2 (2016/02/15 12:31 +00:00)

  • #79 Require the non-minified dist build in index (@idan)
  • #73 Clear timeout when unmounting. (@joelburget)
  • #72 clearing delayShowLoop-Timeout when component will unmount (@dsumer)

v1.0.0 (2016/01/10 02:16 +00:00)

  • #68 better fix for Maximum call stack size exceeded (@enjalot)
  • #62 Fixes IE's lacking event constructor (@mikkelvagn)
  • #54 New Feature: watchWindow (@Sly777)
  • #55 Add support for borders (@ahstro)
  • #1 New Feature: watchWindow (@Sly777)

v0.9.0 (2015/11/26 14:09 +00:00)

  • #53 New Feature, Fixes (@Sly777)

v0.5.0 (2015/09/13 00:55 +00:00)

  • #36 also babelify and move style.js to dist (@conorhastings)
  • #34 avoid getBoundingClientRect() to be called twice (@ruffle1986)

v0.3.7 (2015/08/18 13:44 +00:00)

  • #26 Add editorconfig and eslinter to project (@johnamiahford)

v0.3.5 (2015/08/02 10:58 +00:00)

  • #22 Convert ReactTooltip to es6 class (@johnamiahford)
  • #19 remove querySelector and use findDOMNode instead (@bezreyhan)

v0.3.0 (2015/06/17 08:46 +00:00)

  • #15 Adding support for server-side rendering (@bluejamesbond)
  • #8 Change curly brackets to quotes (single) (@af7)
  • #6 Fix bug with mouse hover triggerring on tooltip children (@tom-s)
  • #5 fixed classnames require call (@mciparelli)