├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE.md ├── README.md ├── babel.config.js ├── example ├── README.md ├── babel.config.js ├── index.html ├── package.json ├── src │ ├── app.js │ ├── groups.js │ ├── home.js │ ├── index.js │ ├── list.js │ ├── stateful.js │ ├── style.js │ └── user.js ├── webpack.config.js └── yarn.lock ├── index.html ├── package.json ├── react-portal-tooltip.gif ├── src ├── Card.js ├── StatefulToolTip.js ├── ToolTip.js └── index.js ├── test └── index.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | react-portal-tooltip.gif 3 | .babelrc 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6.1" 4 | 5 | install: 6 | - npm install 7 | 8 | notifications: 9 | email: false 10 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Romain Berger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Portal Tooltip 2 | 3 | Awesome tooltips. 4 | 5 | [![Build Status](https://img.shields.io/travis/romainberger/react-portal-tooltip/master.svg?style=flat-square)](https://travis-ci.org/romainberger/react-portal-tooltip) [![npm version](https://img.shields.io/npm/v/react-portal-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/react-portal-tooltip) 6 | [![npm downloads](https://img.shields.io/npm/dm/react-portal-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/react-portal-tooltip) 7 | 8 | ![react tooltip](https://raw.githubusercontent.com/romainberger/react-portal-tooltip/master/react-portal-tooltip.gif) 9 | 10 | ## Installation 11 | 12 | ```shell 13 | $ npm install react-portal-tooltip 14 | ``` 15 | 16 | **Warning** The versions 2.x on npm are compatible with React 16. Corresponding versions for older versions of React: 17 | 18 | ```shell 19 | # For react v15 20 | $ npm install react-portal-tooltip@1 21 | 22 | # For react 0.14 23 | $ npm install react-portal-tooltip@0.14 24 | 25 | # For react 0.13 26 | $ npm install react-portal-tooltip@0.13 27 | ``` 28 | 29 | ## Documentation and demo 30 | 31 | [http://romainberger.github.io/react-portal-tooltip/](http://romainberger.github.io/react-portal-tooltip/) 32 | 33 | ## Usage 34 | 35 | ```javascript 36 | import React from 'react' 37 | import ToolTip from 'react-portal-tooltip' 38 | 39 | class MyComponent extends React.Component { 40 | state = { 41 | isTooltipActive: false 42 | } 43 | showTooltip() { 44 | this.setState({isTooltipActive: true}) 45 | } 46 | hideTooltip() { 47 | this.setState({isTooltipActive: false}) 48 | } 49 | render() { 50 | return ( 51 |
52 |

This is a cool component

53 | 54 |
55 |

This is the content of the tooltip

56 | 57 |
58 |
59 |
60 | ) 61 | } 62 | } 63 | ``` 64 | 65 | ### Props 66 | 67 | * `active`: boolean, the tooltip will be visible if true 68 | * `position`: top, right, bottom or left. Default to right 69 | * `arrow`: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified 70 | * `align`: the alignment of the whole tooltip relative to the `parent` element. possible values : center, right, left. Default to center. 71 | * `tooltipTimeout`: timeout for the tooltip fade out in milliseconds. Default to 500 72 | * `parent`: the tooltip will be placed next to this element. Can be the id of the parent or the ref (see example below) 73 | * `group`: string, necessary if you want several independent tooltips 74 | * `style`: object, allows customizing the tooltip. Checkout the [example](https://github.com/romainberger/react-portal-tooltip/blob/master/example/src/style.js) for details. 75 | * `useHover` bool, default to true. If true, the tooltip will stay visible when hovered. 76 | 77 | ### Parent prop 78 | 79 | You can use an id or a ref to reference the parent: 80 | 81 | #### id 82 | 83 | ```javascript 84 |
85 | Hover me!!! 86 |
87 | 88 |
89 |

This is the content of the tooltip

90 |
91 |
92 | ``` 93 | 94 | #### ref 95 | 96 | ```javascript 97 |
{ this.element = element }} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}> 98 | Hover me!!! 99 |
100 | 101 |
102 |

This is the content of the tooltip

103 |
104 |
105 | ``` 106 | 107 | ### Stateful ToolTip 108 | 109 | If you only use the Tooltip for mouse enter / mouse leave, you may not want to handle the state yourself for all elements. In this case, you can use the stateful version which will do it for you: 110 | 111 | Import the stateful version: 112 | 113 | ```js 114 | import { StatefulToolTip } from "react-portal-tooltip" 115 | ``` 116 | 117 | Then create your parent and give it as a prop to the Tooltip: 118 | 119 | ```js 120 | const button = Hover me to display the tooltip 121 | 122 | return ( 123 | 124 | Stateful Tooltip content here! 125 | 126 | ) 127 | ``` 128 | 129 | `StatefulToolTip` takes the same props as `ToolTip`, plus a `className` prop that will be applied to the root element wrapping the parent ([see the example](https://github.com/romainberger/react-portal-tooltip/blob/master/example/src/stateful.js)). 130 | 131 | [See the example live](http://romainberger.github.io/react-portal-tooltip/#/stateful). 132 | 133 | ## Development 134 | 135 | ```shell 136 | # clone 137 | $ git clone git@github.com:romainberger/react-portal-tooltip.git 138 | 139 | # install the dependencies 140 | $ npm install 141 | 142 | # go to the example folder, then install more dependencies 143 | $ cd example && npm install 144 | 145 | # start the development server with hot reloading 146 | $ npm start 147 | 148 | # to build run this command from the root directory 149 | $ npm build 150 | ``` 151 | 152 | ## License 153 | 154 | MIT 155 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ["@babel/preset-env", { 4 | targets: { 5 | chrome: 58, 6 | ie: 10, 7 | }, 8 | }], 9 | "@babel/preset-react", 10 | ], 11 | plugins: [ 12 | "@babel/plugin-proposal-class-properties", 13 | "@babel/plugin-proposal-export-default-from", 14 | "@babel/plugin-proposal-object-rest-spread", 15 | "@babel/plugin-proposal-export-namespace-from", 16 | ], 17 | } 18 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # React Portal Tooltip 2 | 3 | ## Usage 4 | 5 | ```shell 6 | # install the dependencies 7 | $ npm install 8 | 9 | # run the development server with hot reloading 10 | $ npm start 11 | ``` 12 | 13 | Then open your browser at [http://localhost:3000](http://localhost:3000) 14 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | "@babel/preset-react", 4 | ], 5 | plugins: [ 6 | "@babel/plugin-proposal-class-properties", 7 | "@babel/plugin-proposal-export-default-from", 8 | "@babel/plugin-proposal-object-rest-spread", 9 | "@babel/plugin-proposal-export-namespace-from", 10 | ], 11 | env: { 12 | production: { 13 | plugins: [ 14 | ["transform-react-remove-prop-types", { 15 | removeImport: true, 16 | }], 17 | ], 18 | }, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Portal Tooltip Example 5 | 6 | 11 | 12 | 13 |
14 |
15 |

16 | React Portal ToolTip Example 17 |

18 |

19 | Github 20 |

21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-portal-tooltip-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "author": "Romain Berger ", 7 | "license": "MIT", 8 | "scripts": { 9 | "build": "NODE_ENV=production webpack --progress --colors --display-error-details", 10 | "dev": "BUILD=true webpack --progress --colors --display-error-details && node server.js", 11 | "start": "webpack-dev-server --config webpack.config.js --progress --colors" 12 | }, 13 | "dependencies": { 14 | "@babel/cli": "7.2.3", 15 | "@babel/core": "7.4.0", 16 | "@babel/plugin-proposal-class-properties": "7.4.0", 17 | "@babel/plugin-proposal-export-default-from": "7.2.0", 18 | "@babel/plugin-proposal-export-namespace-from": "7.2.0", 19 | "@babel/plugin-proposal-object-rest-spread": "7.4.0", 20 | "@babel/preset-react": "7.0.0", 21 | "history": "^4.7.2", 22 | "react": "^16.8.4", 23 | "react-dom": "^16.8.4", 24 | "react-router": "5.0.0", 25 | "react-router-dom": "5.0.0", 26 | "superagent": "^1.8.3", 27 | "webpack": "^4.29.6" 28 | }, 29 | "devDependencies": { 30 | "babel-loader": "8.0.5", 31 | "react-hot-loader": "next", 32 | "webpack-cli": "3.3.0", 33 | "webpack-dev-server": "3.2.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import request from 'superagent' 3 | import { BrowserRouter as Router, Route, Link } from "react-router-dom" 4 | 5 | import Home from './home' 6 | import Stateful from './stateful' 7 | import Groups from './groups' 8 | import Style from './style' 9 | 10 | export default class App extends React.Component { 11 | state = { 12 | users: {list: []}, 13 | } 14 | 15 | componentWillMount() { 16 | request('GET', 'https://api.dailymotion.com/users?fields=id,username,screenname,cover_250_url,avatar_120_url,videos_total,fans_total&list=recommended&limit=20') 17 | .send() 18 | .set('Accept', 'application/json') 19 | .end((err, res) => { 20 | this.setState({users: res.body}) 21 | }) 22 | } 23 | 24 | render() { 25 | const { users } = this.state 26 | 27 | return ( 28 | 29 |
30 |
31 |
    32 |
  • Basic usage
  • 33 |
  • Stateful usage
  • 34 |
  • Groups
  • 35 |
  • Style
  • 36 |
37 |
38 |
39 | 40 | } /> 41 | } /> 42 | } /> 43 |