├── .gitignore ├── .npmignore ├── react-portal-tooltip.gif ├── .travis.yml ├── src ├── index.js ├── StatefulToolTip.js ├── ToolTip.js └── Card.js ├── example ├── src │ ├── index.js │ ├── groups.js │ ├── list.js │ ├── stateful.js │ ├── app.js │ ├── user.js │ ├── style.js │ └── home.js ├── README.md ├── babel.config.js ├── index.html ├── webpack.config.js └── package.json ├── .editorconfig ├── babel.config.js ├── index.html ├── test └── index.js ├── LICENSE.md ├── package.json ├── README.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | react-portal-tooltip.gif 3 | .babelrc 4 | -------------------------------------------------------------------------------- /react-portal-tooltip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainberger/react-portal-tooltip/HEAD/react-portal-tooltip.gif -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ToolTip from "./ToolTip" 2 | import StatefulToolTip from "./StatefulToolTip" 3 | 4 | export default ToolTip 5 | export { 6 | StatefulToolTip, 7 | } 8 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './app' 4 | 5 | ReactDOM.render(, document.querySelector('#root')) 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Portal Tooltip Example 5 | 6 | 7 | 8 |
9 |
10 |

11 | React Portal ToolTip Example 12 |

13 |

14 | Github 15 |

16 |
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import assert from 'assert' 3 | import ReactShallowRenderer from 'react-test-renderer/shallow' 4 | import Tooltip from '../src' 5 | 6 | const renderer = (Component) => { 7 | const shallowRenderer = new ReactShallowRenderer() 8 | shallowRenderer.render(Component) 9 | return shallowRenderer.getRenderOutput() 10 | } 11 | 12 | describe('React Portal Tooltip', () => { 13 | it('should export a react component', () => { 14 | assert.equal(typeof Tooltip, 'function') 15 | }) 16 | 17 | it('should render null', () => { 18 | let tooltip = renderer(Hey this is a tooltip) 19 | 20 | assert.equal(tooltip, null) 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /example/src/groups.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import List from './list' 3 | 4 | export default class Groups extends React.Component { 5 | render() { 6 | return ( 7 |
8 |
9 |
10 |
11 | The group props will allow you to have multiple groups of tooltip. Hover the following usernames to see the result. 12 |
13 |
14 |
15 |

first group

16 |
17 | 18 |
19 |
20 |
21 |

second group

22 |
23 | 24 |
25 |
26 |
27 |
28 | ) 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/src/list.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import User from './user' 3 | 4 | export default class List extends Component { 5 | split(data, n) { 6 | let result = [], 7 | set = [] 8 | 9 | data.forEach((item) => { 10 | if (set.length === n) { 11 | result.push(set) 12 | set = [] 13 | } 14 | 15 | set.push(item) 16 | }) 17 | 18 | if (set.length) { 19 | result.push(set) 20 | } 21 | 22 | return result 23 | } 24 | 25 | shouldComponentUpdate(nextProps) { 26 | return this.props.data !== nextProps.data || this.props.position !== nextProps.position || this.props.arrow !== nextProps.arrow 27 | } 28 | 29 | getList() { 30 | let list = [] 31 | this.split(this.props.data, 4).forEach((set, i) => { 32 | list.push(
33 | {set.map((user, key) => ())} 34 |
) 35 | }) 36 | 37 | return list 38 | } 39 | 40 | render() { 41 | return
{this.getList()}
42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const NODE_ENV = process.env.NODE_ENV || 'development' 5 | 6 | var config = { 7 | mode: NODE_ENV, 8 | entry: [ 9 | path.join(__dirname, 'src/index.js') 10 | ], 11 | output: { 12 | path: path.join(__dirname, 'build'), 13 | publicPath: '/build/', 14 | filename: 'bundle.js' 15 | }, 16 | devServer: { 17 | compress: true, 18 | historyApiFallback: true, 19 | hot: true, 20 | host: "127.0.0.1", 21 | port: "3000", 22 | publicPath: "/build/", 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.js$/, 28 | exclude: /node_modules/, 29 | loader: 'babel-loader', 30 | }, 31 | ], 32 | }, 33 | plugins: [ 34 | new webpack.DefinePlugin({ 35 | "process.env.NODE_ENV": JSON.stringify(NODE_ENV), 36 | }), 37 | ], 38 | } 39 | 40 | // if (NODE_ENV === "development") { 41 | // config.entry.push('webpack-dev-server/client?http://0.0.0.0:3000') 42 | // config.devtool = "inline-source-map" 43 | 44 | // config.plugins = [ 45 | // new webpack.NoErrorsPlugin() 46 | // ] 47 | // } 48 | 49 | module.exports = config 50 | -------------------------------------------------------------------------------- /src/StatefulToolTip.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react" 2 | import PropTypes from "prop-types" 3 | 4 | import ToolTip from "./ToolTip" 5 | 6 | export default class StatefulToolTip extends React.Component { 7 | static propTypes = { 8 | className: PropTypes.string, 9 | } 10 | 11 | static defaultProps = { 12 | className: '', 13 | } 14 | 15 | state = { 16 | tooltipVisible: false, 17 | } 18 | 19 | onMouseEnter = () => { 20 | this.setState({ tooltipVisible: true }) 21 | } 22 | 23 | onMouseLeave = () => { 24 | this.setState({ tooltipVisible: false }) 25 | } 26 | 27 | render() { 28 | const { 29 | children, 30 | className, 31 | parent, 32 | ...props 33 | } = this.props 34 | 35 | return ( 36 | 37 | this.parent = p } key="parent">{ this.props.parent } 38 | { 39 | this.parent ? 40 | { this.props.children } 41 | : null 42 | } 43 | 44 | ) 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /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/stateful.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import { StatefulToolTip } from './../..' 4 | 5 | export default class Stateful extends Component { 6 | escape(html) { 7 | return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML 8 | } 9 | 10 | getBasicExample() { 11 | return { 12 | __html: this.escape(`const buttonStateful = Hover me Stateful 13 | 14 | return Stateful Tooltip here!`) 15 | } 16 | } 17 | 18 | render() { 19 | const buttonStateful = Hover me Stateful 20 | 21 | return ( 22 |
23 |
24 |
25 | Stateful tooltip usage: 26 |
27 |           
28 |
29 | Stateful: 30 | 31 | Stateful Tooltip here! 32 |
33 |
34 |
35 | ) 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-portal-tooltip", 3 | "version": "2.4.7", 4 | "description": "Awesome React tooltips", 5 | "main": "lib/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/romainberger/react-portal-tooltip" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/romainberger/react-portal-tooltip" 12 | }, 13 | "homepage": "https://github.com/romainberger/react-portal-tooltip", 14 | "scripts": { 15 | "start": "babel src --watch --out-dir lib", 16 | "build": "babel src --out-dir lib", 17 | "test": "mocha --require @babel/register", 18 | "prepublish": "rm -rf lib && npm run build" 19 | }, 20 | "keywords": [ 21 | "react", 22 | "reactjs", 23 | "component", 24 | "tooltip", 25 | "portal" 26 | ], 27 | "author": "Romain Berger ", 28 | "license": "MIT", 29 | "peerDependencies": { 30 | "react": "^16.6.0", 31 | "react-dom": "^16.6.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/cli": "7.2.3", 35 | "@babel/core": "7.4.0", 36 | "@babel/plugin-proposal-class-properties": "7.4.0", 37 | "@babel/plugin-proposal-export-default-from": "7.2.0", 38 | "@babel/plugin-proposal-export-namespace-from": "7.2.0", 39 | "@babel/plugin-proposal-object-rest-spread": "7.4.0", 40 | "@babel/preset-env": "7.4.2", 41 | "@babel/preset-react": "7.0.0", 42 | "@babel/register": "7.4.0", 43 | "mocha": "6.0.2", 44 | "react": "^16.6.0", 45 | "react-dom": "^16.6.0", 46 | "react-test-renderer": "^16.0.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /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 |