Merge pull request #202 from wwayne/handle-getcontent-null

Hide tooltip when getContent return null or undefined, same for empty…

Author: wwayne

README.md

@@ -108,7 +108,7 @@ import ReactTooltip from 'react-tooltip'
 ```
 
 ## Trouble Shooting
-### Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
+### 1. Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
 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:
 
 1. Put `<ReactTooltip />` out of the `<Modal>`
@@ -118,6 +118,21 @@ The component was designed to set a `<Reactooltip />` one place then use tooltip
 >I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
 method to control tooltip's behaviour in some situations
 
+### 2. Hide tooltip when getContent returns null or undefined
+When you set `getContent={() => {return null}}` or `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.
+
+```
+<p data-tip='' data-for='test'></p>
+<ReactTooltip id='test' getContent={() => { return null }}/>
+```
+
+Same for empty children, if you don't want show the tooltip when the children is empty
+
+```
+<p data-tip='' data-for='test'></p>
+<ReactTooltip id='test'>{}</ReactTooltip>
+```
+
 ## Article
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
 

src/index.js

@@ -222,16 +222,16 @@ class ReactTooltip extends Component {
     const isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false
 
     // Generate tootlip content
-    let content = children
+    let content
     if (getContent) {
       if (Array.isArray(getContent)) {
         content = getContent[0] && getContent[0]()
       } else {
         content = getContent()
       }
     }
-    const placeholder = getTipContent(originTooltip, content, isMultiline)
-    const isEmptyTip = typeof placeholder === 'string' && placeholder === ''
+    const placeholder = getTipContent(originTooltip, children, content, isMultiline)
+    const isEmptyTip = typeof placeholder === 'string' && placeholder === '' || placeholder === null
 
     // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
     const switchToSolid = e instanceof window.FocusEvent || isGlobalCall

src/utils/getTipContent.js

@@ -13,8 +13,10 @@
  */
 import React from 'react'
 
-export default function (tip, children, multiline) {
+export default function (tip, children, getContent, multiline) {
   if (children) return children
+  if (getContent !== undefined && getContent !== null) return getContent // getContent can be 0, '', etc.
+  if (getContent === null) return null // Tip not exist and childern is null or undefined
 
   const regexp = /<br\s*\/?>/
   if (!multiline || multiline === 'false' || !regexp.test(tip)) {