reacttooltip / react-tooltip

React Tooltip Component

react-tooltip

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

Documentation for V4 - Github Page.

Documentation for V5 - ReactTooltip.

---

Installation

npm install react-tooltip

or

yarn add react-tooltip

Sponsors

Gold Sponsors 🌟

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

react-tooltip's Issues

ReactTooltip element contents displayed if another tooltip no longer rendered

If a tooltip on the page is no longer rendered then the contents of the other tooltips are rendered to the page in their dom location. This will happen if the tooltip element itself is no longer rendered, or if an element containing a tooltip is no longer rendered.

The problem corrects itself for all tooltips when another tooltip is moused over.

This example has 3 divs with mouseover tooltips. It also has 3 buttons which toggle the display of that tooltip off. When toggling the display of one of the tooltips off, the content of the other two is displayed until you mouseover one of the remaining tooltip enabled divs.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTooltip from 'react-tooltip';

class TooltipProblem extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        showTooltip1: true,
        showTooltip2: true,
        showTooltip3: true
      }

      // Prebind 'this' to methods
      this._handleClick1 = this._handleClick1.bind(this);
      this._handleClick2 = this._handleClick2.bind(this);
      this._handleClick3 = this._handleClick3.bind(this);
  }

  _handleClick1() {
    this.setState(
      {
        showTooltip1: !this.state.showTooltip1
      }
    )
  }

  _handleClick2() {
    this.setState(
      {
        showTooltip2: !this.state.showTooltip2
      }
    )
  }

  _handleClick3() {
    this.setState(
      {
        showTooltip3: !this.state.showTooltip3
      }
    )
  }

  render() {

    return (
      <div>

        <div data-tip
             data-for={"tooltip1"}>Mouseover1</div>
        {this.state.showTooltip1 &&
          <ReactTooltip id={"tooltip1"} place="bottom" type="dark" effect="solid">
            <p>My tooltip 1</p>
          </ReactTooltip>
        }
      <input type="button" onClick={this._handleClick1} value="Toggle 1" />

      <br /><br />

      <div data-tip
           data-for={"tooltip2"}>Mouseover2</div>
      {this.state.showTooltip2 &&
        <ReactTooltip id={"tooltip2"} place="bottom" type="dark" effect="solid">
          <p>My tooltip 2</p>
        </ReactTooltip>
      }
    <input type="button" onClick={this._handleClick2} value="Toggle 2" />

    <br /><br />

    <div data-tip
         data-for={"tooltip3"}>Mouseover3</div>
    {this.state.showTooltip3 &&
      <ReactTooltip id={"tooltip3"} place="bottom" type="dark" effect="solid">
        <p>My tooltip 3</p>
      </ReactTooltip>
    }
    <input type="button" onClick={this._handleClick3} value="Toggle 3" />

      </div>
    );
  }

}


(function() {
    'use strict';

    ReactDOM.render(<TooltipProblem />, document.getElementById('app'));
})();

This is a simplified example, toggling the actual tooltips on/off, but as I mentioned, it happens if any tooltip is no longer rendered. So if you use tooltips in two different components and then one of those components is no longer rendered, you see this problem.

Tooltip displaying correctly:

After toggling off the display of a tooltip element (3 in this case):

As you can see, "My Tooltip 1" and "My Tooltip 2" are rendered to the screen, which should not happen.

Cheers

npm package v0.8.2 is missing dist

The JS file doesn't exist at dist/react-tooltip.js.

When changing the data-tip doesn't refresh the the tooltip

I have this tooltip, that has a dynamic data-tip:

<span data-tip={switchTip} onClick={this.props.switchType}><i className="icon-refresh" />Switch to {oppositeType}</span>

when switchTip changes, it doesn't refresh the information inside the data-tip, is this an issue, or more like a feature?

Thanks in advance!

require classnames

I'm using webpack to build my app. Resolving classNames does not work unless I use an alias to resolve the module. So is there a specific reason to require classNames instead of classnames ?

Tooltip does not fade out when hovered element is removed

Scenario, I have a delete button on a thing, button has a tooltip.
I hover the button, tooltip shows.
I click the button, button goes away, tooltip remains

Visibility on tooltip hover, custom JSX inside tooltip

I think it's really useful things

• prevent tooltip hide on tooltip hover(mb option?)
• allow JSX objects for tooltip content

This things at least let you to add links inside tooltip that can be clicked

not aligning properly

Under certain circumstances, the tooltip is positioned below and to the right of the target. I'm not sure what is causing it. Have you run into this before?

The target is the turquoise circle that contains a "?".

"dataset" and IE

Please read what it says here:

http://stackoverflow.com/questions/23034428/having-problems-in-ie8-when-attempting-to-get-data-from-target-event

It appears that the use of "dataset" causes problems on IE10 and below.

Would you consider fixing this? (if it is a problem at all)

Thx.

Server Rendering issues

Tooltip component does not seem to work when rendering on server.

If you open the tooltip and the scroll the window, the tooltip doesn't hide

Try to open a tooltip and the scroll the window (solid or float). The tooltip stay and doesn't disappear

http://wwayne.com/react-tooltip/

Multiline tooltip

Hi. Thanks for the nice component. I was playing with it a bit and sadly couldn't find a way to do multiline tooltips, like:

foo
bar

Is there a quick way to get that? Thanks!
(I quickly checked the source, but couldn't find any)

Automatically change place when close to screen edge for solid effect

I was thinking of taking a look at this. Do you have any insight in why the recursion mentioned here happens?

Using without require

Hi there,
I'm new to react (and require)
I'm trying to use this from a webpage, not npm.

So I did this:

<link rel="stylesheet" type="text/css" media="screen" href="resources/styles/react-tooltip.min.css" />
<script src=resources/scripts/react.min.js"></script>
<script src="resources/scripts/react-dom.min.js"></script>
<script src="resources/scripts/react-tooltip.js"></script>

Then I did this:

ReactDOM.render(React.createElement('span', {'data-tip':'rawr'}, 'hover me'), myEl);

However it does not work, on hover of this element nothing happens. Can you please advise.

Add delay on showTooltip

How do we feel about adding a possible delay on showing a tooltip?

Something along the lines of:

showTooltip(e) {
  if (this.props.delay) {
    return setTimeout(this.updateTooltip, this.props.delay);
  }

  // run normal update
  this.updateTooltip(e);
}

delayShow not working

as the title

Add a react component in the tooltip instead of just text

Children should not toggle tooltip

I stumbled upon this behaviour which looks like a bug to me.
The tooltip correctly shows when hovering the outer div, but it shows again when hovering any of the children elements (here the span), while I would expect that only hovering the main div should show it.

<div data-tip data-for='tt'>
  <span>foo</span>
  <span>bar</span>
</div>

<ReactTooltip id='tt'>
  <p>This is the tooltip</p>
</ReactTooltip>

Error: Cannot find module './basic'

Code:

'use strict';

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

var ReactTooltip = require('react-tooltip');

var Item = React.createClass({

    displayName: 'Item',

    render: function() {

        return <p>
                    <span className="title" data-placeholder="Double click to edit">{this.props.item.title</span>
                    <ReactTooltip />
        </p>;
    }

});

module.exports = Item;

Errors:

Error: Cannot find module './basic' from '/projects/my-project/node_modules/react-tooltip'
Error: Cannot find module './basic-show' from '/projects/my-project/node_modules/react-tooltip'
Error: Cannot find module './place-top' from '/projects/my-project/node_modules/react-tooltip'
Error: Cannot find module './place-bottom' from '/projects/my-project/node_modules/react-tooltip'

react peerDependencies is incorrect

You're using React.findDOMNode() which is leading to the error "Uncaught TypeError: _react2.default.findDOMNode is not a function" when a project using it is still on React 12 (exact: 0.12.2). It seems that function was added in 0.13.1, so it looks like your peerDependencies is out of date.

an error occurs when I route to other page using react-tooltip

It says "Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.",
And when I jump up to the Code I find that the code "document.getElementsByTagName('head')[0].removeChild(tag);" in the react-tooltip.js.
I debug it finding that it's called many times,maybe because I have many tooltips in the page.So,I think it need a null judgement here.

regexp for multiline matches on spaces between words

this breaks some styles, and also looks very silly with short words like A, I etc... can we make multiline an option?

should support custom color & font size, font family

would like to use branding color, not defaults as now. Also font size & font family.

Rebuild event listeners when needed

Hi @wwayne, do you think it is reasonable to let React-Tooltip register a customized event to make sure it can rebuild listeners when needed ?

Right now, ReactToolip only works for pre-existed elements and if the DOM structure is changed, new-added elements will not be handled by this component.

Any idea ?

Warnings and Errors on the console

While I managed to get the Tooltip on a page element, I do get the following warnings/errors on the console:

Do you have an idea why this may be happening?

Thanks.

date-tip=""

when data-tip="", it shouldn't show the tooltip

Feature: ReactTooltip.show()

I have an important tooltip that I want to show programmatically. I could then set a timeout and ReactTooltip.hide() it .. Best if the hover would prevent it from being hidden.

Do you have an example for this? Should I try to capture an event and pass it to ReactTooltip.showTooltip (e) ?

when form input is in bootstrap modal dialog, tooltip's position and size show wrong

I toggle a bootstrap modal dialog, in this dialog, there is a form with inputs, some inputs have tooltip, but when i tested, tooltip element shows away from input and shows perpendicular.
when this form not in a modal dialog, the tooltip is normal

Add Multiline tooptip

Please add multiline tooltip options.

Tooltip not rendering on Firefox

I think this is because of how firefox deals with position. Particularly position:fixed;

offsets for positioning

With jQuery-UI I was able to define offsets like
el.tooltip({position: { my: "left+10 center", at: "right center"}})
Is it possible to do that with your component?

Keep tooltip inside window

If I am at the edge, part of the tooltip goes out of the window (page).

Could this be automatically adjusted, so it is always shown full?

Thx.

Maximum call stack size exceeded.

Installed the tooltip with the standard settings from the example. Using latest Chrome.
<p data-tip="hello world">Tooltip</p> <ReactTooltip />

Getting Uncaught RangeError: Maximum call stack size exceededdefineProperty.

No issue is present it we have effect="solid".

Server side error - document is not defined

Does server side rendering works ?

ReferenceError: document is not defined
at ReactTooltip.render (/home/bobi/ws/node_modules/react-tooltip/dist/react-tooltip.js:365:10)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/home/bobi/ws/node_modules/react/lib/ReactCompositeComponent.js:587:34)

behavior changed after update from 0.7.3 to 0.8.1

here is the dom structure:

<div>
  <Content data-tip="content">
    <SubContent>
      <SubElement></SubElement>
    </SubContent>
  </Content>
  <ReactTooltip place="bottom" effect="solid" />
</div>

With 0.7.3, when I mouse over <Content> area or its subelements, the tooltip component will positioned relative to <Content> element.

But with 0.8.1, the tooltip will positioned relative to the current mouseover target. e.g. If I mouse over <SubContent> element, the tooltip will moved to the bottom of <SubContent>.

Just wonder if I have some misunderstanding about default behavior.

Tooltip does not when moving between adjacent elements

The tooltip does not work when mouse is moved between adjacent elements with margin: 0;

But Adding a margin between the elements fixes it.

Moving mouse horizontally over element's content makes tooltip flicker

Take a "solid top/bottom" example http://wwayne.com/react-tooltip/ and move your mouse left-right, and the right side will flicker.

Tooltip goes off-screen if placed over element near screen corner with effect="solid" property

Hey,

I wonder if it'll be possible implement this. Issue screenshot: (browser window corner is at left)

See how bootstrap implementing it:

It moves the content at left side but leaves tooltip triangle over element.

npmjs.com documentation formatting

The README.MD formatting goes a bit haywire on npmjs.com. Looks fine on GitHub though.

Should support showing the tool tip onload

Should support showing the tool tip when the page is loaded, and then maybe clicking on it should make it disappear. Just for the first time. Subsequent times the hover/click effect can be maintained

Add space for readability purposes

For future contributors, should we add spaces throughout the source file for better readability?

// ex. this is a little hard on the eyeballs => 
type: e.target.getAttribute("data-type")?e.target.getAttribute("data-type"):(this.props.type?this.props.type:"dark")

React 0.14 support

In React 0.14 you can get a DOM node by directly calling the ref. See the React blog. Now i'm getting warnings in the console like this: Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

1.0.0 Cannot read property 'y' of undefined

After upgrading. When hovering, and the tooltip would normally not be visible in it's default placement, I get a ton of errors.

The tooltip is also destroyed until a refresh.

Some variables values if it helps:

0.9.8 works, but the tooltip is not visible if it clips out out view (which I suppose is what you tried to fix in 1.0.0)

Multiline Regex is broken for some languages

Hi !
The multiline regex is a bit weird, and breaks easily.
It should detect a line break on <br>, <br/> and multiple spaces.

Currently, it add breaks on non-word characters, which leads to some unexpected behaviors with special characters and accentued characters from foreign languages.

Could you please consider switching to another regex ?
I'm suggesting /<br\s*\/?>|\s{2,}/ (untested, but should be fine)

Issue with DelayShow

I just upgraded to 0.9.5 with delay show functionality, but it breaks my code. In the ReactTooltip.prototype.updateTooltip function, the parameter e.currentTarget comes in as expected, but in the delayshowloop, it is null, and therefore no tooltip ever appears. Can you have a look? For now I have downgraded to 0.9.3

DelayShow

Hi, I really like this plugin, just wonder why it's not possible to delay (before) showing the tooltip, or is it? Is there a plan to include that at any point?

behavior I don't understand, is this a quirk of react or react-tooltip?

If I put

<ReactTooltip />

in a 'high level' component and put

<p data-tip="hello world">Tooltip</p>

nested about 3 components down then tooltips don't show. However, if I put a

<p data-tip="hello world">Tooltip</p>

half way between them the lower level tooltips work, but only if I mouse over the mid level tooltip first.

If I put

<ReactTooltip />

in the 'middle' then tooltips from all nested levels work.

If I browse through the DOM I can see all the nodes in the right places, it just seems like the ReactTooltip javascript event isn't setting up or it can't see the tooltip node at a distance.

Translate3d on the parent (not necessarily direct parent) causes the tooltips to misalign and fire incorrectly in on Safari 8.0.6 (latest)

Event click should be removed when not in focus

If when you click to show the tooltip, then when clicking elsewhere should make the tooltip disappear.

React can't find the root component node for data-reactid value - it probably means you've loaded two copies of React on the page

I'm getting this error when I add into my component. Any ideas why?

Control position of tooltip's tip

Is there a way to control the tooltip's tip (the little arrow below the content bubble) more specifically?
Example, say I want a tooltip's tip to be at the bottom left side of the tooltip as opposed to being always in the center depending on whether it is set to be top/bottom/left/right.