Skip to content

Commit 277633f

Browse files
authored
Merge branch 'master' into dynamic_tooltip_content
2 parents cc37da9 + f686afd commit 277633f

20 files changed

+17300
-289
lines changed

.travis.yml

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,15 @@ cache:
33
directories:
44
- node_modules
55
node_js:
6-
- "4"
6+
- "8"
77
notifications:
8-
email: false
8+
email:
9+
recipients:
10+
11+
on_success: change
12+
on_failure: always
913
install:
10-
- npm install
14+
- npm install
15+
16+
script:
17+
- npm run build

CHANGELOG.md

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,50 @@
11
## Change Log
22

3-
### 3.2.1 (2016/09/30 09:50 +00:00)
3+
### 3.4.1 (2018/04/05 17:15 +00:00)
4+
- [#369](https://github.com/wwayne/react-tooltip/pull/369) fix(index.js): add missing argument so tooltip hides. (@aronhelser)
5+
- [#372](https://github.com/wwayne/react-tooltip/pull/372) Travis: update node version to fix travis build. (@aronhelser)
6+
7+
### 3.4.0 (2017/10/16 13:39 +00:00)
8+
- [#321](https://github.com/wwayne/react-tooltip/pull/321) React 16 support (@mikecousins)
9+
10+
### 3.3.1 (2017/10/05 05:08 +00:00)
11+
- [#292](https://github.com/wwayne/react-tooltip/pull/292) Fix typo (@piperchester)
12+
13+
### 3.3.0 (2017/04/14 03:34 +00:00)
14+
- [#287](https://github.com/wwayne/react-tooltip/pull/287) Use prop-types package instead of React.PropTypes (@ssilve1989)
15+
16+
### 3.2.10 (2017/03/28 20:41 +00:00)
17+
- [#278](https://github.com/wwayne/react-tooltip/pull/278) Make MutationObserver-based removal tracking (@huumanoid)
18+
- [#272](https://github.com/wwayne/react-tooltip/pull/272) Fix wrapper tag (@huumanoid)
19+
- [#259](https://github.com/wwayne/react-tooltip/pull/259) Track removal of DOM elements (@antoniogiordano)
20+
- [#270](https://github.com/wwayne/react-tooltip/pull/270) Fix typos and improve for clarity (@theholla)
21+
22+
### 3.2.9 (2017/03/20 15:41 +00:00)
23+
- [#236](https://github.com/wwayne/react-tooltip/pull/236) escape backslash in getTargetArray method (@rnons)
24+
25+
### 3.2.7 (2017/02/17 07:24 +00:00)
26+
- [#262](https://github.com/wwayne/react-tooltip/pull/262) Fix nodelist converte in safari (@wwayne)
27+
- [#260](https://github.com/wwayne/react-tooltip/pull/260) Fix NodeList to Array convertion (@huumanoid)
28+
29+
### 3.2.6 (2017/02/08 12:34 +00:00)
30+
- [#255](https://github.com/wwayne/react-tooltip/pull/255) (fix) Remove console logs (@flexpert)
31+
- [#254](https://github.com/wwayne/react-tooltip/pull/254) Add support for className prop (@jonbeller)
32+
33+
### 3.2.4 (2017/02/07 03:57 +00:00)
34+
- [#251](https://github.com/wwayne/react-tooltip/pull/251) Dropfen dynamic wrapper (@dropfen)
35+
36+
### 3.2.3 (2017/01/30 03:00 +00:00)
37+
- [#247](https://github.com/wwayne/react-tooltip/pull/247) Fix delayHide issue #246 (@huumanoid)
38+
- [#238](https://github.com/wwayne/react-tooltip/pull/238) Update README.md (@nikbelikov)
39+
- [#233](https://github.com/wwayne/react-tooltip/pull/233) Added more syntax highlighting (@oyeanuj)
40+
- [#229](https://github.com/wwayne/react-tooltip/pull/229) Replaced Object.keys(...) by Object.getOwnPropertyNames(...) (@gauthierj)
41+
42+
### 3.2.2 (2016/11/23 08:23 +00:00)
43+
- [#220](https://github.com/wwayne/react-tooltip/pull/220) Use parameter 'useCapture' for remove listener if it is registered as… (@achernetsky)
44+
- [#223](https://github.com/wwayne/react-tooltip/pull/223) Fix/security csp style src (@briantrice)
45+
- [#216](https://github.com/wwayne/react-tooltip/pull/216) Fix fire of global show event for IE (@SubVersive)
46+
47+
### 3.2.1 (2016/09/30 09:51 +00:00)
448
- [#202](https://github.com/wwayne/react-tooltip/pull/202) Hide tooltip when getContent return null or undefined, same for empty… (@wwayne)
549
- [#201](https://github.com/wwayne/react-tooltip/pull/201) Hide tooltip if the tip is empty or disabled (@wwayne)
650

@@ -43,7 +87,7 @@
4387
- [#145](https://github.com/wwayne/react-tooltip/pull/145) fix typo (@meandavejustice)
4488

4589
### 3.0.13 (2016/07/14 09:53 +00:00)
46-
- [#136](https://github.com/wwayne/react-tooltip/pull/136) Check if current element is under transform (@CremAlex)
90+
- [#136](https://github.com/wwayne/react-tooltip/pull/136) Check if current element is under transform (@CremaFR)
4791
- [#135](https://github.com/wwayne/react-tooltip/pull/135) Transform 3d (@wwayne)
4892

4993
### 3.0.10 (2016/07/12 00:28 +00:00)
@@ -94,7 +138,7 @@
94138
### v1.1.2 (2016/02/15 12:31 +00:00)
95139
- [#79](https://github.com/wwayne/react-tooltip/pull/79) Require the non-minified dist build in index (@idan)
96140
- [#73](https://github.com/wwayne/react-tooltip/pull/73) Clear timeout when unmounting. (@joelburget)
97-
- [#72](https://github.com/wwayne/react-tooltip/pull/72) clearing delayShowLoop-Timeout when component will unmount (@Monterra)
141+
- [#72](https://github.com/wwayne/react-tooltip/pull/72) clearing delayShowLoop-Timeout when component will unmount (@dsumer)
98142

99143
### v1.0.0 (2016/01/10 02:16 +00:00)
100144
- [#68](https://github.com/wwayne/react-tooltip/pull/68) better fix for Maximum call stack size exceeded (@enjalot)

Makefile

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ lint:
1111
@echo Linting...
1212
@$(NODE_BIN)/standard --verbose | $(NODE_BIN)/snazzy src/index.js
1313

14-
test: lint
15-
@echo Start testing...
16-
@$(NODE_BIN)/mocha $(MOCHA_OPTS) $(TEST)
17-
1814
convertCSS:
1915
@echo Converting css...
2016
@node bin/transferSass.js
@@ -30,6 +26,7 @@ devJS:
3026

3127
devCSS:
3228
@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
29+
@$(NODE_BIN)/node-sass $(SRC)/index.scss $(EXAMPLE_DIST)/style.css
3330
@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
3431

3532
devServer:

README.md

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
88
[download-url]: https://npmjs.org/package/react-tooltip
99

10+
## Looking for maintainers
11+
I learnt a lot from creating and maintaining react-toolip, but now I start putting my focus on other challenges, so just let me know by sending email to [email protected] if you have interests in maintaining the project :)
12+
13+
## Maintainers
14+
[huumanoid](https://github.com/huumanoid)
15+
16+
[aronhelser](https://github.com/aronhelser)
17+
1018
## Installation
1119

1220
```sh
@@ -23,10 +31,11 @@ import ReactTooltip from 'react-tooltip'
2331
```
2432

2533
2 . Add data-tip = "your placeholder" to your element
34+
```jsx
35+
<p data-tip="hello world">Tooltip</p>
36+
```
2637

27-
<p data-tip="hello world">Tooltip</p>
28-
29-
3 . Including react-tooltip component
38+
3 . Include react-tooltip component
3039

3140

3241
```js
@@ -35,13 +44,13 @@ import ReactTooltip from 'react-tooltip'
3544

3645
**Standalone**
3746

38-
You can import `node_modules/react-tooltip/standalone/react-tooltip.min.js` into your page, please make sure that you have already imported `react` and `react-dom` into your page.
47+
You can import `node_modules/react-tooltip/standalone/react-tooltip.min.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
3948

4049
## Options
4150
Notes:
42-
* The tooltip is using `type: dark` `place: top` `effect: float` as **default** attribute, you don't have to add these options if you don't want to change default
51+
* The tooltip sets `type: dark` `place: top` `effect: float` as **default** attributes. You don't have to add these options if you don't want to change the defaults
4352
* The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
44-
* The option you set on specific element, for example: `<a data-type="warning"></a>` will only make effect on this specific tooltip
53+
* The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
4554

4655
Check example: [React-tooltip Test](http://wwayne.com/react-tooltip)
4756

@@ -56,30 +65,32 @@ Global|Specific |Type |Values | Description
5665
isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture
5766
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
5867
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
59-
class | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
68+
className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
6069
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
6170
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
6271
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
72+
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
6373
border | data-border | Bool | true, false | Add one pixel white border
6474
getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
6575
afterShow | null | Func | () => {} | Function that will be called after tooltip show
6676
afterHide | null | Func | () => {} | Function that will be called after tooltip hide
6777
disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false
6878
scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
6979
resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
80+
wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div
7081

7182
## Using react component as tooltip
7283
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
7384

7485
##### Note:
75-
1. **data-tip** is necessary, because `<ReactTooltip />` find tooltip via this attribute
76-
2. **data-for** correspond to the **id** of `<ReactTooltip />`
77-
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**
86+
1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
87+
2. **data-for** corresponds to the **id** of `<ReactTooltip />`
88+
3. When using react component as tooltip, you can have many `<ReactTooltip />` in a page but they should have different **id**s
7889

7990
## Static Methods
80-
###ReactTooltip.hide(target)
91+
### ReactTooltip.hide(target)
8192

82-
> Hide the tooltip manually, the target is optional, if no target passed in, all exitent tooltip will be hiden
93+
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
8394
8495
```js
8596
import {findDOMNode} from 'react-dom'
@@ -90,11 +101,11 @@ import ReactTooltip from 'react-tooltip'
90101
<ReactTooltip />
91102
```
92103

93-
###ReactTooltip.rebuild()
104+
### ReactTooltip.rebuild()
94105

95106
> Rebinding all tooltips
96107
97-
###ReactTooltip.show(target)
108+
### ReactTooltip.show(target)
98109

99110
> Show specific tooltip manually, for example:
100111
@@ -107,35 +118,38 @@ import ReactTooltip from 'react-tooltip'
107118
<ReactTooltip />
108119
```
109120

110-
## Trouble Shooting
121+
## Troubleshooting
111122
### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
112-
The component was designed to set a `<Reactooltip />` one place then use tooltip everywhere, but a lot of people stuck in using this component with modal, you can check the discussion [here](https://github.com/wwayne/react-tooltip/issues/130), the summarization of solving the problem is as following:
123+
The component was designed to set `<ReactTooltip />` once and then use tooltip everywhere, but a lot of people get stuck when using this component in a modal. You can read the discussion [here](https://github.com/wwayne/react-tooltip/issues/130). To solve this problem:
113124

114-
1. Put `<ReactTooltip />` out of the `<Modal>`
115-
2. Use `React.rebuild()` when opening the modal
116-
3. If your modal's z-index happens to higher than the tooltip, use the attribute `class` to custom your tooltip's z-index
125+
1. Place `<ReactTooltip />` outside of the `<Modal>`
126+
2. Use `ReactTooltip.rebuild()` when opening the modal
127+
3. If your modal's z-index happens to be higher than the tooltip's, use the attribute `className` to custom your tooltip's z-index
117128

118-
>I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
129+
>I suggest always putting `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
119130
method to control tooltip's behaviour in some situations
120131

121132
### 2. Hide tooltip when getContent returns undefined
122-
When you set `getContent={() => { return }}` you will find the tooltip will dispaly `true`, that's because React will set the value of data-* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situaction.
133+
When you set `getContent={() => { return }}` you will find the tooltip will display `true`. That's because React will set the value of data-* to be 'true' automatically if there is no value to be set. So you have to set `data-tip=''` in this situation.
123134

124-
```
135+
```jsx
125136
<p data-tip='' data-for='test'></p>
126137
<ReactTooltip id='test' getContent={() => { return null }}/>
127138
```
128139

129140
Same for empty children, if you don't want show the tooltip when the children is empty
130141

131-
```
142+
```jsx
132143
<p data-tip='' data-for='test'></p>
133144
<ReactTooltip id='test'>{}</ReactTooltip>
134145
```
135146

136147
## Article
137148
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
138149

139-
### License
150+
## Authors
151+
see [AUTHORS](https://github.com/wwayne/react-tooltip/blob/master/AUTHORS.txt)
152+
153+
## License
140154

141155
MIT

bin/transferSass.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,19 @@ function transferSass () {
1111
console.log(err)
1212
return
1313
}
14-
fs.writeFile(path.resolve(__dirname, '../src/style.js'), "export default '" + result.css.toString().replace(/\n/g, '') + "'", function (err) {
14+
var cssSource = result.css.toString()
15+
fs.writeFile(path.resolve(__dirname, '../src/style.js'), "export default '" + cssSource.replace(/\n/g, '') + "'", function (err) {
1516
if (err) {
1617
console.error(err)
1718
}
18-
console.log('css file has been transformed successful')
19-
process.exit()
19+
console.log('css file has been transformed to JS successful')
20+
fs.writeFile(path.resolve(__dirname, '../src/style.css'), cssSource, function (err) {
21+
if (err) {
22+
console.error(err)
23+
}
24+
console.log('css file has been transformed successful')
25+
process.exit()
26+
})
2027
})
2128
})
2229
}

bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"url": "https://github.com/wwayne/react-tooltip"
2828
},
2929
"dependencies": {
30-
"react": "^0.14.0 || ^15.0.0"
30+
"react": ">=0.14",
31+
"react-dom": ">=0.14"
3132
}
3233
}

example/src/index.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
'use strict'
22

3-
import React from 'react'
3+
import React, { Component } from 'react'
44
import {render, findDOMNode} from 'react-dom'
55
import ReactTooltip from '../../src'
66

7-
const Test = React.createClass({
8-
9-
getInitialState () {
10-
return {
7+
class Test extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
1111
place: 'top',
1212
type: 'dark',
1313
effect: 'float',
1414
condition: false
1515
}
16-
},
16+
}
1717

1818
changePlace (place) {
1919
this.setState({
2020
place: place
2121
})
22-
},
22+
}
2323

2424
changeType (type) {
2525
this.setState({
2626
type: type
2727
})
28-
},
28+
}
2929

3030
changeEffect (effect) {
3131
this.setState({
3232
effect: effect
3333
})
34-
},
34+
}
3535

3636
_onClick () {
3737
this.setState({
3838
condition: true
3939
})
40-
},
40+
}
4141

4242
render () {
4343
let { place, type, effect } = this.state
@@ -46,7 +46,7 @@ const Test = React.createClass({
4646
<section className='tooltip-example'>
4747
<h4 className='title'>React Tooltip</h4>
4848
<div className='demonstration'>
49-
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip">
49+
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip" data-iscapture="true">
5050
◕‿‿◕
5151
</a>
5252
</div>
@@ -182,18 +182,18 @@ const Test = React.createClass({
182182
<div className="side">
183183
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(・ω´・ )</a>
184184
{/* <a data-for='custom-class' data-tip='' data-tip-disable='true'>empty testing</a> */}
185-
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
185+
<ReactTooltip id='custom-class' className='extraClass' delayHide={1000} effect='solid'/>
186186
</div>
187187
<div className="side">
188188
<a data-for='custom-theme' data-tip='custom theme'>(・ω´・ )</a>
189-
<ReactTooltip id='custom-theme' class='customeTheme'/>
189+
<ReactTooltip id='custom-theme' className='customeTheme'/>
190190
</div>
191191
</div>
192192
<br />
193193
<pre className='example-pre'>
194194
<div>
195195
<p>{"<a data-tip='hover on me will keep the tootlip'>(・ω´・ )́)</a>\n" +
196-
"<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
196+
"<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
197197
".extraClass {\n" +
198198
" font-size: 20px !important;\n" +
199199
" pointer-events: auto !important;\n" +
@@ -205,7 +205,7 @@ const Test = React.createClass({
205205
</div>
206206
<div>
207207
<p>{"<a data-tip='custom theme'>(・ω´・ )́)</a>\n" +
208-
"<ReactTooltip class='customeTheme'/>\n" +
208+
"<ReactTooltip className='customeTheme'/>\n" +
209209
" .customeTheme {\n" +
210210
" color: #ff6e00 !important;\n" +
211211
" background-color: orange !important;\n" +
@@ -250,6 +250,6 @@ const Test = React.createClass({
250250
</div>
251251
)
252252
}
253-
})
253+
}
254254

255-
render(<Test />, document.getElementById('main'))
255+
render(<Test />, document.getElementById('main'))

0 commit comments

Comments
 (0)