├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── .gitignore
├── test
    └── index.js
├── LICENSE
├── package.json
├── README.md
└── src
    └── index.js


/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - stable
 4 | sudo: false
 5 | cache:
 6 |   directories:
 7 |     - node_modules
 8 | script:
 9 |   - npm test
10 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # react-overflow-tooltip change log
2 | 
3 | All notable changes to this project will be documented in this file.
4 | This project adheres to [Semantic Versioning](http://semver.org/).
5 | 
6 | ## Unreleased
7 | * engage
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 
29 | lib
30 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | require('babel-core/register')
 2 | 
 3 | const test = require('ava')
 4 | const jsdom = require('jsdom').jsdom
 5 | 
 6 | const React = require('react')
 7 | const ReactDOM = require('react-dom')
 8 | 
 9 | const OverflowTooltip = require('../src/index.js')
10 | 
11 | global.document = jsdom()
12 | global.window = document.defaultView
13 | 
14 | test((t) => {
15 |   const container = document.createElement('div')
16 | 
17 |   ReactDOM.render(
18 |     <OverflowTooltip title='too long text...'>
19 |       <div>too long text</div>
20 |     </OverflowTooltip>,
21 |     container
22 |   )
23 | 
24 |   t.true(/too long text/.test(container.textContent))
25 |   t.end()
26 | })
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015, Kazato Sugimoto <uiureo@gmail.com>
2 | 
3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4 | 
5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-overflow-tooltip",
 3 |   "description": "A React component that shows a tooltip only if the text is overflow",
 4 |   "version": "2.0.0",
 5 |   "author": "Kazato Sugimoto <uiureo@gmail.com>",
 6 |   "bugs": {
 7 |     "url": "https://github.com/uiureo/react-overflow-tooltip/issues"
 8 |   },
 9 |   "devDependencies": {
10 |     "ava": "^0.5.0",
11 |     "babel": "^5.8.21",
12 |     "babel-core": "^5.8.34",
13 |     "jsdom": "^7.0.2",
14 |     "react": "^0.14.3",
15 |     "react-dom": "^0.14.3",
16 |     "standard": "*"
17 |   },
18 |   "homepage": "https://github.com/uiureo/react-overflow-tooltip",
19 |   "keywords": [
20 |     "browser",
21 |     "react"
22 |   ],
23 |   "license": "ISC",
24 |   "main": "lib/index.js",
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/uiureo/react-overflow-tooltip.git"
28 |   },
29 |   "scripts": {
30 |     "test": "standard && ava",
31 |     "build": "babel src -d lib",
32 |     "prepublish": "npm run build"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-overflow-tooltip
 2 | 
 3 | [![npm][npm-image]][npm-url]
 4 | [![travis][travis-image]][travis-url]
 5 | 
 6 | [npm-image]: https://img.shields.io/npm/v/react-overflow-tooltip.svg?style=flat-square
 7 | [npm-url]: https://www.npmjs.com/package/react-overflow-tooltip
 8 | [travis-image]: https://img.shields.io/travis/uiureo/react-overflow-tooltip.svg?style=flat-square
 9 | [travis-url]: https://travis-ci.org/uiureo/react-overflow-tooltip
10 | 
11 | A React component that shows a tooltip only if the text is overflow.
12 | 
13 | ```js
14 | var ReactOverflowTooltip = require('react-overflow-tooltip')
15 | 
16 | <ReactOverflowTooltip title='too long text'>
17 |   <div>too long text</div>
18 | </ReactOverflowTooltip>
19 | // => <div title="too long text...">too long text...</div>
20 | 
21 | <ReactOverflowTooltip title='short text'>
22 |   <div>{ text }</div>
23 | </ReactOverflowTooltip>
24 | // => <div>too long text...</div>
25 | ```
26 | 
27 | ## Install
28 | 
29 | ```
30 | npm install react-overflow-tooltip
31 | ```
32 | 
33 | ## License
34 | 
35 | [ISC](LICENSE)
36 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | function isTextOverflow (element) {
 5 |   return element.clientWidth < element.scrollWidth
 6 | }
 7 | 
 8 | export default class OverflowTooltip extends React.Component {
 9 |   constructor (props) {
10 |     super(props)
11 | 
12 |     this.state = {
13 |       overflow: false
14 |     }
15 |   }
16 | 
17 |   componentDidMount () {
18 |     this.checkOverflow()
19 |   }
20 | 
21 |   componentWillReceiveProps () {
22 |     this.setState({ overflow: false })
23 |   }
24 | 
25 |   componentDidUpdate () {
26 |     this.checkOverflow()
27 |   }
28 | 
29 |   checkOverflow () {
30 |     const element = ReactDOM.findDOMNode(this)
31 | 
32 |     const overflow = isTextOverflow(element)
33 |     if (overflow !== this.state.overflow) {
34 |       this.setState({ overflow: overflow })
35 |     }
36 |   }
37 | 
38 |   render () {
39 |     let childProps = {}
40 |     if (this.state.overflow) {
41 |       childProps.title = this.props.title
42 |     }
43 | 
44 |     return React.cloneElement(
45 |       React.Children.only(this.props.children),
46 |       childProps
47 |     )
48 |   }
49 | }
50 | 
51 | OverflowTooltip.displayName = 'OverflowTooltip'
52 | OverflowTooltip.propTypes = {
53 |   title: React.PropTypes.string.isRequired,
54 |   children: React.PropTypes.node.isRequired
55 | }
56 | 


--------------------------------------------------------------------------------