feat: getContent(dataTip)

jafin · May 15, 2018 · 8bfbfc9 · 8bfbfc9
1 parent b3ed903
commit 8bfbfc9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ className	|   data-class  |  String  |   | extra custom class, can use !importan
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
  insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
- getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
+ getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
  afterShow | null | Func | () => {} | Function that will be called after tooltip show
  afterHide | null | Func | () => {} | Function that will be called after tooltip hide
  disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false

diff --git a/example/src/index.js b/example/src/index.js
@@ -248,6 +248,27 @@ class Test extends React.Component {
               </div>
             </pre>
           </div>
+          <div className="section">
+            <h4 className='title'>Compute or enrich tip content</h4>
+            <p className="sub-title"></p>
+            <div className="example-jsx">
+              <div className="side">
+                <a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>
+              </div>
+              <div className="side">
+                <a data-for='enrich' data-tip='really high'>(❂‿❂)</a>
+              </div>
+              <ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>\n" +
+                "<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" + 
+                "<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>"}</p>
+              </div>
+            </pre>
+          </div>
           <div className="section">
             <h4 className='title'>Test Scrolling</h4>
             <p className="sub-title"></p>

diff --git a/src/index.js b/src/index.js
@@ -237,9 +237,9 @@ class ReactTooltip extends React.Component {
     let content
     if (getContent) {
       if (Array.isArray(getContent)) {
-        content = getContent[0] && getContent[0]()
+        content = getContent[0] && getContent[0](this.state.originTooltip)
       } else {
-        content = getContent()
+        content = getContent(this.state.originTooltip)
       }
     }