Make getContent to support dynamical generate content while hover

.npmignore

@@ -9,6 +9,7 @@ example/
 test/
 bin/
 CHANGELOG.md
+src/
 
 // setting files
 .babelrc

README.md

@@ -61,6 +61,7 @@ class	| data-class | String | | extra custom class, can use !important to
  delayHide	| data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
  delayShow	| data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
  border | data-border | Bool | true, false | Add one pixel white border
+ getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
 
 ## Using react component as tooltip
 Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

example/src/index.js

@@ -221,6 +221,36 @@ const Test = React.createClass({
  </div>
  </pre>
  </div>
+
+ <div className="section">
+ <h4 className='title'>Update tip content over time</h4>
+ <p className="sub-title"></p>
+
+ <div className="example-jsx">
+ <div className="side">
+ <a data-for='getContent' data-tip>=͟͟͞͞( •̀д•́)</a>
+ <ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)}/>
+ </div>
+
+ <div className="side">
+ <a data-for='overTime' data-tip>=͟͟͞͞( •̀д•́)</a>
+ <ReactTooltip id='overTime'
+ getContent={[() => {return new Date().toISOString()}, 1000]}/>
+ </div>
+ </div>
+ <br />
+ <pre className='example-pre'>
+ <div>
+ <p>{"<a data-for='getContent' data-tip>=͟͟͞͞( •̀д•́)</a>\n" +
+ "<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
+ </div>
+
+ <div>
+ <p>{"<a data-for='overTime' data-tip>=͟͟͞͞( •̀д•́)</a>\n" +
+ "<ReactTooltip id='overTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
+ </div>
+ </pre>
+ </div>
  </section>
  </div>
  )

src/index.js

@@ -38,7 +38,7 @@ class ReactTooltip extends Component {
  watchWindow: PropTypes.bool,
  isCapture: PropTypes.bool,
  globalEventOff: PropTypes.string,
- getContent: PropTypes.func
+ getContent: PropTypes.any
  }
 
  constructor (props) {
@@ -64,6 +64,7 @@ class ReactTooltip extends Component {
  this.mount = true
  this.delayShowLoop = null
  this.delayHideLoop = null
+ this.intervalUpdateContent = null
  }
 
  componentDidMount () {
@@ -75,8 +76,7 @@ class ReactTooltip extends Component {
  componentWillUnmount () {
  this.mount = false
 
- clearTimeout(this.delayShowLoop)
- clearTimeout(this.delayHideLoop)
+ this.clearTimer()
 
  this.unbindListener()
  this.removeScrollListener()
@@ -170,11 +170,13 @@ class ReactTooltip extends Component {
  const originTooltip = e.currentTarget.getAttribute('data-tip')
  const isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false
 
- let content
- if (children) {
- content = children
- } else if (getContent) {
- content = getContent()
+ let content = children
+ if (getContent) {
+ if (Array.isArray(getContent)) {
+ content = getContent[0] && getContent[0]()
+ } else {
+ content = getContent()
+ }
  }
 
  const placeholder = getTipContent(originTooltip, content, isMultiline)
@@ -193,6 +195,16 @@ class ReactTooltip extends Component {
  }, () => {
  this.addScrollListener(e)
  this.updateTooltip(e)
+
+ if (getContent && Array.isArray(getContent)) {
+ this.intervalUpdateContent = setInterval(() => {
+ const {getContent} = this.props
+ const placeholder = getTipContent(originTooltip, getContent[0](), isMultiline)
+ this.setState({
+ placeholder
+ })
+ }, getContent[1])
+ }
  })
  }
 
@@ -228,8 +240,7 @@ class ReactTooltip extends Component {
 
  if (!this.mount) return
 
- clearTimeout(this.delayShowLoop)
- clearTimeout(this.delayHideLoop)
+ this.clearTimer()
  this.delayHideLoop = setTimeout(() => {
  this.setState({
  show: false
@@ -282,6 +293,15 @@ class ReactTooltip extends Component {
  }
  }
 
+ /**
+ * CLear all kinds of timeout of interval
+ */
+ clearTimer () {
+ clearTimeout(this.delayShowLoop)
+ clearTimeout(this.delayHideLoop)
+ clearInterval(this.intervalUpdateContent)
+ }
+
  render () {
  const {placeholder, extraClass, html} = this.state
  let tooltipClass = classname(