react-component/tooltip

React Tooltip

rc-tooltip

React Tooltip

Screenshot

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera
IE 8 + ✔	Firefox 31.0+ ✔	Chrome 31.0+ ✔	Safari 7.0+ ✔	Opera 30.0+ ✔

Install

Usage

var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');

// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'

ReactDOM.render(
  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
    <a href="#">hover</a>
  </Tooltip>,
  container,
);

Examples

npm start and then go to http://localhost:8000/demo

Online demo: https://react-component.github.io/tooltip/demo

API

Props

name	type	default	description
trigger	string | string[]	'hover'	which actions cause tooltip shown. enum of 'hover','click','focus'
visible	boolean	false	whether tooltip is visible
defaultVisible	boolean	false	whether tooltip is visible by default
placement	string	'right'	tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'
motion	object		Config popup motion. Please ref demo for example
onVisibleChange	(visible: boolean) => void;		Callback when visible change
afterVisibleChange	(visible: boolean) => void;		Callback after visible change
overlay	ReactNode | () => ReactNode		tooltip overlay content
overlayStyle	object		style of tooltip overlay
overlayClassName	string		className of tooltip overlay
prefixCls	string	'rc-tooltip'	prefix class name of tooltip
mouseEnterDelay	number	0	delay time (in second) before tooltip shows when mouse enter
mouseLeaveDelay	number	0.1	delay time (in second) before tooltip hides when mouse leave
getTooltipContainer	(triggerNode: HTMLElement) => HTMLElement	() => document.body	get container of tooltip, default to body
destroyTooltipOnHide	boolean	false	destroy tooltip when it is hidden
align	object		align config of tooltip. Please ref demo for usage example
showArrow	boolean | object	false	whether to show arrow of tooltip
zIndex	number		config popup tooltip zIndex

Important Note

Tooltip requires a child node that accepts an onMouseEnter, onMouseLeave, onFocus, onClick event. This means the child node must be a built-in component like div or span, or a custom component that passes its props to its built-in component child.

Accessibility

For accessibility purpose you can use the id prop to link your tooltip with another element. For example attaching it to an input element:

<Tooltip
    ...
    id={this.props.name}>
    <input type="text"
           ...
           aria-describedby={this.props.name}/>
</Tooltip>

If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.

NOTE: role="tooltip" is also added to expose the purpose of the tooltip element to a screenreader.

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

License

rc-tooltip is released under the MIT license.

tooltip's Issues

onlyChild must be passed a children with exactly one child

Occurs only on the latest version, downgrading to 3.3.5 solves this problem so guessing something got published prematurely?

Tested on react 15.1.0.

Tooltip always follows the bottom of the page

The Tooltip always sticks to the bottom of the page if it's element is not visible:

提供统一的延迟支持

延迟展现和延迟消失，这样交互上的体验更好，不会频繁闪动。

ClassNames Prop

Currently you can set styles on the wrapStyle and overlayStyle, but now that all components are rendered to the body it would be nice to have the ability to scope a tooltip by passing a className to get added on next to "rc-tooltip".

You can override prefixCls but sometimes you want to keep all of the base styles and animations for the tooltip but change a rc-tooltip-arrow or rc-tooltip-inner

rc-tooltip is depending on react 15 because of nested dependency

This is because of following dependency chain

rc-tooltip -> rc-trigger -> rc-util

In this chain rc-util depends on react 15.0.

index.md is not found

Cannot look through examples locally. http://localhost:8007/examples/index.md is saying not found.

trigger 为 hover 时，如果 hover 到其他浮层，会导致 popover 消失

比如在 tooltip 里放入一个 select，即使把 select 的 popup 渲染到了 tooltip 的 overlay 里面也会触发 mouseleave，很奇怪。

overlay 类似这样

                          <div>
                                <div ref="container"></div>
                                <Select defaultValue="lucy" style={{width:200}} getPopupContainer={function() {return me.refs.container;}}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="disabled" disabled>Disabled</Option>
                                    <Option value="yiminghe">yiminghe</Option>
                                </Select>
                            </div>

Add ability to hide immediately and ignore the delay

Prop to override delay on hide so you can have a delay on enter but when you hover off it hides immediately. In many cases you dont want the tooltip to stick around after you dismiss it.

something along the lines of

delaySetVisible(visible) {
    const delay = this.props.delay * 1000;
    if (delay) {
      if (this.delayTimer) {
        clearTimeout(this.delayTimer);
      }
      if (visible === false && this.props.closeImmediately) {
        this.setVisible(visible);
      } else {
        this.delayTimer = setTimeout(() => {
          this.setVisible(visible);
          this.delayTimer = null;
        }, delay);
      }
    } else {
      this.setVisible(visible);
    }
  }

Doesn't work on iPhone

The simple.js example with click option selected doesn't work. It shows the tooltips and then it is not possible to close the tooltip by clicking again (or any other link either)

Add a doc/warning about passing down callbacks into custom components

Would be nice to add a warning for custom component saying that you need to pass down some callbacks to work.

if (trigger.indexOf('click') !== -1) {
  newChildProps.onClick = createChainedFunction(this.onClick, childProps.onClick);
  newChildProps.onMouseDown = createChainedFunction(this.onMouseDown, childProps.onMouseDown);
  newChildProps.onTouchStart = createChainedFunction(this.onTouchStart, childProps.onTouchStart);
}
if (trigger.indexOf('hover') !== -1) {
  newChildProps.onMouseEnter = createChainedFunction(this.onMouseEnter, childProps.onMouseEnter);
  newChildProps.onMouseLeave = createChainedFunction(this.onMouseLeave, childProps.onMouseLeave);
}
if (trigger.indexOf('focus') !== -1) {
  newChildProps.onFocus = createChainedFunction(this.onFocus, childProps.onFocus);
  newChildProps.onBlur = createChainedFunction(this.onBlur, childProps.onBlur);
}

destroyTooltipOnHide is not supported by rc-trigger

destroyTooltipOnHide prop is simply passed down to rc-trigger component, but it's not supported by rc-trigger.

Please remove it to avoid confusion or support it somehow (the latter would be preferred).

Hide on click outside?

Hi @yiminghe! I am trying to do something close to your form error example but I need to hide the tooltip if the user clicks anywhere outside the tooltip. I'm wondering if I can do that with this library?

Thank you for open sourcing the library!

Maximum call stack size exceeded

Installation didn't succed. I get this error when I'm trying to install this component .
I'm using a Windows 10 machine, current node v6.3.0, npm v3.10.6

Cannot find module 'babel-runtime'

Problem description
Since I upgrade rc-tooltip from 3.4.2 to 3.4.3, I get the following errors

Cannot find module 'babel-runtime/helpers/objectWithoutProperties' from '/usr/src/react/node_modules/twreporter-keystone/node_modules/rc-slider/node_modules/rc-tooltip/lib'
2017-04-20 15:04:66 error building views/list.js:
Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from '/usr/src/react/node_modules/twreporter-keystone/node_modules/rc-slider/node_modules/rc-tooltip/lib'
 2017-04-20 15:04:67 error building views/list.js:
 Cannot find module 'babel-runtime/helpers/classCallCheck' from '/usr/src/react/node_modules/twreporter-keystone/node_modules/rc-slider/node_modules/rc-tooltip/lib'
 2017-04-20 15:04:67 error building views/list.js:
Cannot find module 'babel-runtime/helpers/inherits' from '/usr/src/react/node_modules/twreporter-keystone/node_modules/rc-slider/node_modules/rc-tooltip/lib'

The problems seems that we lacks of babel-runtime pkg.

placement是对象的时候，箭头定位有问题

当传入的placement是dom-align配置对象的时候，比如：

      placement: {
         points: ['bl', 'tl'],
         offset: [-10, -8]
      }

getPlacementCss返回的是placement-[object object]，然后箭头就没有了。

Edit font-family

Hello, I wanna know if its possible to edit the font family on the tooltip shown. I tried to put a class on the element but it doesnt overwrite the font family for some reason. (I know about the order on the css files for an html)
Thanks in advice for ur help

`Tooltip` crashes

See: react-component/slider#52

Warnings.

Hello, I get a few warnings when using this component:

warning.js:44 Warning: Unknown prop `visible` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by LazyRenderBox)
    in LazyRenderBox (created by PopupInner)
    in div (created by PopupInner)
    in PopupInner (created by Popup)
    in Align (created by Popup)
    in AnimateChild (created by Animate)
    in Animate (created by Popup)
    in div (created by Popup)
    in Popup

Resizing the browser when tooltip is visible causes position error

When you have the tooltip open by default or you click to open and then resize your browser, the tooltip does not move with the content.

React 0.14 Compatibility

This project is not technically React 0.14 compatible since two of its dependencies are not: rc-align and rc-animate.

When using rc-tooltip w/ React 0.14, you'll get the following warning/error in the console:

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

I have create these PRs to update the dependencies:

rc-animate: react-component/animate#4
rc-align: react-component/align#4

Auto-position arrow

When overflow.adjustX and/or overflow.adjustY is true, then the box was auto-adjusted to not go offscreen. In those cases, I expected the arrow to be positioned accordingly.

In the screenshot below, the arrow position should be pointing to the deprecated flag.

Dragging left range slider handle past the beginning causes slider handle to move

• When dragging the left handle on the range slider past the left edge of the slider rail, the left handle starts moving to the right as the user continues to click-drag to the left

Docs to get started are not entirely right

If you just follow the steps, then the component will have the class rc-tooltip-hidden but there is no CSS rule for this class. Therefore it will not hide and it will not position correctly.

Position should also be absolute, because relative increases the height of the page and is not positioned correctly.

In order to make it work properly you need to include the bootstrap.css file.

If you are using less use this:

@import (inline) 'projectRoot/node_modules/rc-tooltip/assets/bootstrap.css';

Option to define margin from edge of the screen

I would like to have an option to prevent tooltips to be too close from the screen.

With onPopupAlign I'm able to do this, but it's not ideal:

 function checkEdges(tooltipEl) {
    const bodyBounds = document.body.getBoundingClientRect();
    const bounds = tooltipEl.getBoundingClientRect();
    const cssPosition = {
        top: parseFloat(tooltipEl.style.top),
        left: parseFloat(tooltipEl.style.left),
    };

    if (bounds.left < 10) {
        tooltipEl.style.left = `${cssPosition.left + 10 - bounds.left}px`;
    } else if (bounds.left + bounds.width > bodyBounds.width - 10) {
        tooltipEl.style.left = `${cssPosition.left - 10 + (bodyBounds.width - bounds.left - bounds.width)}px`;
    }

    if (bounds.top < 10) {
        tooltipEl.style.top = `${cssPosition.top + 10 - bounds.top}px`;
    } else if (bounds.top + bounds.height > bodyBounds.height - 10) {
        tooltipEl.style.top = `${cssPosition.top - 10 + (bounds.top + bounds.height - bodyBounds.height)}px`;
    }
}

// ...
onPopupAlign: (node) => checkEdges(node)

Setting tooltip container to the triggering element would not allow to click on the popup

The plugin would append the popup to the DOM document if a container is not set.
We want the popup to move around with the triggering element, so we have to set the tooltip container.

<Tooltip
  trigger="click"
  getTooltipContainer={()=>document.getElementById('tooltip-container')}
  overlay={
    <div>
      <a href="www.google.com">a link</a>
    </div>
  }
  >
  <div id="tooltip-container">click me<div>
</Tooltip>

Now the tooltip would go wherever the "click me" button goes.
But, the issue is, when clicking on the tooltip, the event is considered as clicking on the parent element:

<div id="tooltip-container">click me</div>

which closes the tooltip!!!

What is worse, we couldn't even click on the link inside the tooltip since this line of code:

event.preventDefault();

inside the onClick function of the Trigger.js file, which is a dependency file of this plugin.

I don't think it should be

event.preventDefault();

Instead, it should be

event.stopPropagation();

If we change that, clicking on the link would work, but the tooltip would close immediately.

I think the problem is, clicking on the tooltip, even the tooltip is a child element of the "click me" button, should not be treated as clicking on the "click me" button.
Can you change the trigger event, so that when we set the tooltip container to the triggering element, clicking on the tooltip would not close itself?

I have tried another method that manually handles the "visible" attribute, but then I lose the ability to close it by clicking on other elements. Also, the

event.preventDefault();

still prevents the user clicking on anything inside the tooltip.

trigger has no docs

On the main page you have no api docs for the "trigger" prop. What possible values accepts?

Tooltip position when scrolling a container with overflow: auto/scroll

Not sure if it's because the Tooltip Component is being rendered in body instead of inside another DOM node but when scrolling a div that has overflow: auto/scroll, the tooltip won't "stick" to its container.

In the simple example you can scroll and the tooltip is stuck to the container.

Warning: Invalid prop `popup` supplied to `Trigger`, expected a ReactNode.

I get this error:

Warning: Failed prop type: Invalid prop `popup` supplied to `Trigger`, expected a ReactNode.
    in Trigger (created by Tooltip)
    in Tooltip (created by Tooltip)
    in div (created by Tooltip)
    in Tooltip (created by GridCellSource)
    in GridCellSource

I am using the component in a really easy way:

import RcTooltip from 'rc-tooltip';

const Tooltip = ({ children, tooltip }) => (
  <div className="tooltip">
    <RcTooltip placement="bottom" mouseEnterDelay={0.1} mouseLeaveDelay={0} overlay={tooltip}>
      <div>{children}</div>
    </RcTooltip>
  </div>
);

Tooltip.propTypes = {
  tooltip: React.PropTypes.string,
  children: React.PropTypes.node
};

What could it be?

After hovering the element and then I go with the mouse out the tooltip doesn't disappear

Using trigger "hover"

tooltip能不能消失

鼠标移除tooltip后就消失,不能 在tooltip还不消失,影响 点击其他的东西.

Explicit setVisible for tooltip

When using the trigger (i.e. click) there is no way to close the popover programatically. I know that I could use the visible prop but I'd rather leave it as an uncontrolled component or else have to implement the click trigger myself. It would be nice if <Tooltip> exposed a setPopupVisible on the component so you don't have to access the trigger ref inside it.

This could simply be:

setPopupVisible(popupVisible) {
  this.refs.trigger.setPopupVisible(popupVisible)
}

Tooltip not showing up when attached to Bootstrap Modal element

I have a bootstrap modal with form buttons that I provide tooltips for ... however, the tooltips aren't showing up. I've tried increasing the z-index in the rc-bootstrap.css but that didn't fix the problem. Tooltip works fine in other non-modal parts of my application.

Anything else I should try?

click 触发方式，点击其他地方浮层消失的行为

目前的实现方式是用了一个透明的全局遮罩，这样会导致一旦点开了浮层，页面上其他地方的 mouseover 交互全部失效，点击交互需要点两次才能触发。

可以换一个更无痛的实现方式：

https://github.com/littlebits/react-popover/blob/a2f90b90c6498fb91c315201f679846c5701c9a1/lib/index.js#L382

When positioning element using transform translate, tooltip is not positioned correctly

I'm attempting to get an element directly in the middle of my window, so I'm using a common CSS trick:

modal {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

One of the elements in the transform is using the react-tooltip component to render a tooltip, however the tooltip renders where the window WOULD HAVE been rather than where the window is after the CSS transform takes place.

In the image, the text which is supposed to have the tooltip is circled, along with where the tooltip rendered.

Cannot use custom components as targets

Tooltip works like a charm with html5 elements like <div> or <span>, however if I put a custom element inside, the tooltip does not appear.

example:

// my custom component:
function Tester ({children}) {
    return (
        <div style={{color: 'red'}}>
            {children}
        </div>
    )
}

// works:
<Tooltip content={<div>hello</div>} >
        <div style={{color: 'green'}}>
            Hover over me!
        </div>
</Tooltip>

// does NOT work:
<Tooltip content={<div>hello</div>} >
        <Tester>
            Hover over me!
        </Tester>
</Tooltip>

Or is there something I am missing?

Seems to be a triggering issue, because setting parameters to visible or defaultVisible does show the tooltip on both cases.

Programmatically close tooltip

My tooltip displays a button that launches a modal.

When the button is clicked, I would like to close the Tooltip.

However there doesn't appear to be anything in the API to manually close the Tooltip.

Has anyone needed to do this?

Or perhaps I actually need a different component i.e. a Popover component.

mouseleave don't trigger on disabled inputs and button

<Tooltip title="mouseleave is not work">
  <button disabled>button text</button>
</Tooltip>

react-bootstrap/react-bootstrap#1254

Tooltip Position is wrong when the tooltip is bigger

I am having issues with the tooltip and it seems it's a specific implementation in the library to position in a visible area to the user.
However in my case I really don't mind that part of the tooltip is not visible and the user would need to scroll to see the entire content if it doesn't fit.

I am using getTooltipContainer to display the tooltip in that specific span. If it doesn't fit in the screen I don't want to change the position to something else.

Here is a small video showing this behaviour:
http://screencast.com/t/t2yLeNOmam

当 placement 是方向时，无法设置 placement.offset

tooltip/src/Tooltip.jsx

Line 106 in dfd2650

domAlign(tipNode, rootNode, {

需要用这个调整下浮层和 trigger 的距离。

InputNumber which is surrounded with Tooltip has something wrong

When I trigger mouseleave, the value of the Inputnumber will be changed.But when I surround Inputnumber with 'span', this problem goes away.

警告提示 unique "key" prop

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Tooltip. It was passed a child from Test. See https://fb.me/react-warning-keys for more information.

module parse failed

I am not able to use this module because:

ERROR in ./~/rc-tooltip/lib/Tooltip.jsx
Module parse failed: \node_modules\rc-tooltip\lib\Tooltip.jsx
Line 12: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| var Popup = require('./Popup');
|
| class Tooltip extends React.Component {
|   constructor(props) {
|     super(props);
 @ ./~/rc-tooltip/index.js 1:17-41
^C
D:\git\>node -v
v0.12.0

I guess that the main problem is that it is written in ES6 without conversion to ES5

当 trigger 同时包含 click 和 focus 时可能点击后出现问题

<Tooltip
  trigger={['click', 'focus']}
  alignment='top'
  overlay={<span>Hey!</span>}
>
  <a href='#'>Click me</a>
</Tooltip>

例如上面这样，或者直接在 demo 中同时选中 click 和 focus 这两个 trigger，当第一次点击 trigger 链接时，会看到气泡弹出后立刻自动收回了。可能是因为 click 和 focus 两个事件同时触发导致。

Allow me to change tooltip arrow color

It seems to be hard-coded to black in /assets/bootstrap.less, using different border-colors according to the tooltip's placement. Perhaps the arrow styling could be done somewhere in the javascript so I could pass in a hex color?

It's possible to work around it in the meantime, but I have to do these sorts of gymnastics:

.my-overlay-className {
    &.top {
        .rc-tooltip-arrow {
            border-top-color: palegoldenrod !important;
        }
    }
    &.left {
        .rc-tooltip-arrow {
            border-left-color: palegoldenrod !important;
        }
    }
    &.right {
        .rc-tooltip-arrow {
            border-right-color: palegoldenrod !important;
        }
    }
    &.bottom {
        .rc-tooltip-arrow {
            border-bottom-color: palegoldenrod !important;
        }
    }
}

Re-anchor/position Tooltip?

Hello there! One big use for ReactTooltip in a project I'm working on is to mouse over urls and have a tooltip show a description of the site via an embedly call. When the embedly call completes it renders a small picture + description of the website and messes up the position of the tooltip. As soon as you move the mouse inside the element the tooltip will right itself.

Here's whats going on:

I have a callback when the embed loads so I've tried messing around by triggering a custom 'updatetooltip' global event that I set up a listener for from 'bindListener' in index.js. It receives the events fine (console.logs working as expected etc) but calling either updateTooltip or updatePosition doesn't seem to do anything (well updatePosition throws a cannot read property 'currentTarget' of undefined). Also tried calling hideTooltip and then showTooltip but the show doesn't go through. ReactTooltip.rebuild() neither. Bit stumped.

Any ideas on how I could go about solving this would be hugely appreciated. Thanks for all your work on this library!

Missing rc-tooltip-wrap-open class at visible state

In previous versions it worked

浮层显示的位置会把 margin 计算进去

http://ant.design/components/tooltip/

[email protected]

而且只有左右的 margin 才会算进去...

The tooltip is not destroyed on mouse leave or on click.

The tooltip stays visible all the time.

Tooltip position relative to mouse pointer

Hi. This plugin has option "follow cursor"? If not, can you explain how to set custom tooltip coordinates?

Visible problem

If visible prop is false then tooltip trigger events such as hover, click, etc. do not open the tooltip
http://take.ms/D1b9e