trendmicro-frontend / react-tooltip Goto Github PK

View Code? Open in Web Editor NEW

2.0 17.0 5.0 2.21 MB

React Tooltip component

Home Page: https://trendmicro-frontend.github.io/react-tooltip/

License: MIT License

JavaScript 73.64% Stylus 26.36%

react tooltips

react-tooltip's Introduction

React Tooltip

Demo: https://trendmicro-frontend.github.io/react-tooltip

Installation

Install the latest version of react and react-tooltip:

npm install --save react @trendmicro/react-tooltip

At this point you can import @trendmicro/react-tooltip and its styles in your application as follows:

import { Tooltip, Infotip } from '@trendmicro/react-tooltip';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-tooltip/dist/react-tooltip.css';

Usage

// Right tooltip
<Tooltip content="Config settings">
    <button>Settings</button>
</Tooltip>

// Right tooltip with a function content
<Tooltip
    content={() => {
        return (<span style={{ whiteSpace: 'nowrap' }}>{'Right tooltip'}</span>);
    }}
>
    <span>Hover on me</span>
</Tooltip>

// Top tooltip
<Tooltip placement="top" content="Top tooltip"><span>Hover on me</span></Tooltip>

// Infotip
<Infotip content="This is a simple example for infotip.">
    <span className="icon icon-info-sign" />
</Infotip >

<Infotip placement="rightTop" content="This is a simple example for infotip.">
    <span className="icon icon-info-sign" />
</Infotip >

<Infotip
    tooltipStyle={{ wordWrap: 'break-word' }}
    content="Pneumonoultramicroscopicsilicovolcanoconiosis is the longest word. Start01234567890123456789012345678901234567890123456789012345678901234567890123456789End Start0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789End"
>
    <span>Hover on me (infotip with long article)</span>
</Infotip>

API

Name	Type	Default	Description
placement	string	'right'	One of: 'top', 'right', 'bottom' and 'left'. Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically.
enterDelay	number	0	The delay length (in ms) before the tooltip appears.
leaveDelay	number	0	The delay length (in ms) before the tooltip disappears.
hideOnClick	boolean	false	Hide tooltip when target been clicked.
disabled	boolean	false	Disable tooltip.
tooltipClassName	string		The className apply to tooltip itself. You can use it to override style if need.
tooltipStyle	object		The style apply to tooltip itself. You can use it to override style if need.
content	node or function		The tooltip content. Required.

Properties for Infotip

Name	Type	Default	Description
placement	string	'rightBottom'	One of: 'rightTop', 'rightBottom', 'leftTop', and 'leftBottom'. Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically.
enterDelay	number	0	The delay length (in ms) before the infotip appears.
leaveDelay	number	0	The delay length (in ms) before the infotip disappears.
hideOnClick	boolean	false	Hide infotip when target been clicked.
disabled	boolean	false	Disable infotip.
tooltipClassName	string		The className apply to infotip itself. You can use it to override style if need.
tooltipStyle	object		The style apply to infotip itself. You can use it to override style if need.
content	node or function		The infotip content. Required.

react-tooltip's People

Contributors

Stargazers

Watchers

Forkers

react-tooltip's Issues

Controllable Tooltips

Hi folks, thank you for open sourcing this! I am wondering if it would be possible to make the tooltip controllable with a prop?

For example, in a form, when there is an error, I would like a tooltip to pop open.

Thoughts?

Set Infotip inside RadioGroup will get runtime error

Set Infotip inside RadioGroup will get run time error about "React.Children.only"

https://github.com/trendmicro-frontend/react-radio

<RadioGroup
    name="comic"
    value={spywareValue}
    onChange={(value, event) => {
        this.handleSpywareChange(0);
    }}
>
    <RadioButton value="dc:batman">
        Example
        <Infotip content="This is a simple example for infotip.">
            <span className="fa fa-info-circle" />
        </Infotip>
    </RadioButton>
    <RadioButton label="Hulk (Marvel)" value="marvel:hulk" />
</RadioGroup>

Tooltip position misplacement on very long texts

Tooltip content window will calculate the width of text and place on the following 4 positions: top, left, right and bottom. However, on a very long truncated text (or may be hidden by over-flow + text-overflow) the tooltip window will disappear because of the wrong position.

Wish to add placements like top-left or bottom-left to resolve the scenario like that
Wish to add placement according to the mouse cursor position. By doing so, it fixes the problem above, too.

Warning: unknown props on div tag: "placement"

Warning: Unknown prop `placement` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

React is complaining about "placement" prop on div tag. This may cause by the {...props} in
render function of Tooltip.jsx:

render() {
  //...
  return (
            <div
                {...props}
                ref={node => {
                    this.tooltipContainer = node;
                }}
                className={classNames(
                    styles.tooltipContainer,
                    className
                )}
            >
           //...
          </div>
  }

Feature Request: Disable Tooltip Component

Is there an easy way to disable tooltip? For example, I may want to hide tooltip when clicking on the target element, or disable tooltip when a button is disabled. How about using a "disabled" prop to enable/disable tooltip?

Warnings about 'getInitialState' in ES6 component class

React is complaining in console about getInitialState() which was used for React.createClass and deprecated in ES6 component class. Rename getInitialState() to getInitState or something else may help.

Warning: getInitialState was defined on Tooltip, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

Will this work on Node.js version 7?

Server build is failing after installing this package, will it be because of the node.js version issues?