Merge remote-tracking branch 'upstream/master'

# Conflicts: # src/index.js
ReactTooltip · Sep 3, 2018 · 6add4b6 · 6add4b6
2 parents ab9c109 + ce365fe
commit 6add4b6
Show file tree

Hide file tree

Showing 11 changed files with 2,826 additions and 2,669 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ className	|   data-class  |  String  |   | extra custom class, can use !importan
  html	|   data-html  |  Bool  |  true, false  |  `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
  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} />`
+ delayUpdate	|   data-delay-update |  Number  |   | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target  
  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 | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically

diff --git a/example/src/index.js b/example/src/index.js
@@ -323,6 +323,67 @@ class Test extends React.Component {
                </div>
              </pre>
           </div>
+            <div className="section">
+                <h4 className='title'>Demonstrate using mouse in tooltip. </h4>
+                <p>Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</p>
+                <p className="sub-title"></p>
+                <div className="example-jsx">
+                    <div className="block" >
+                        <a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>
+                    </div>
+                    <div className="block">
+                        <a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>
+                    </div>
+                    <div className="block" >
+                        <a data-for='soclose' data-tip='3'>3(❂‿❂)</a>
+                    </div>
+                    <div className="block">
+                        <a data-for='soclose' data-tip='4'>4(❂‿❂)</a>
+                    </div>
+                    <div className="block" >
+                        <a data-for='soclose' data-tip='5'>5(❂‿❂)</a>
+                    </div>
+                    <div className="block">
+                        <a data-for='soclose' data-tip='6'>6(❂‿❂)</a>
+                    </div>
+                    <div className="block" >
+                        <a data-for='soclose' data-tip='7'>7(❂‿❂)</a>
+                    </div>
+                    <div className="block">
+                        <a data-for='soclose' data-tip='8'>8(❂‿❂)</a>
+                    </div>
+
+                    <ReactTooltip id='soclose'
+                                  getContent={(dataTip) => <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }
+                                  effect='solid'
+                                  delayHide={500}
+                                  delayShow={500}
+                                  delayUpdate={500}
+                                  place={'right'}
+                                  border={true}
+                                  type={'light'}
+
+                    />
+                </div>
+                <br />
+                <pre className='example-pre'>
+              <div>
+                <p>{"<a data-for='soclose' data-tip='sooooo cute'>(❂‿❂)</a>"}<p/>{"<a data-for='soclose' data-tip='2'>(❂‿❂)</a>..."}<p/>{
+                "<a data-for='soclose' data-tip='really high'>(❂‿❂)</a>\n" +
+                "<ReactTooltip id='soclose'\n" +
+                " getContent={(dataTip) => \n"}{
+                "  <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
+                " effect='solid'\n" +
+                " delayHide={500}\n" +
+                " delayShow={500}\n" +
+                " delayUpdate={500}\n" +
+                " place={'right'}\n" +
+                " border={true}\n" +
+                " type={'light'}"}</p>
+              </div>
+            </pre>
+            </div>
+
         </section>
       </div>
     )

diff --git a/example/src/index.scss b/example/src/index.scss
@@ -157,6 +157,18 @@ html, body{
     height: 0;
     visibility: hidden;
   }
+  .block {
+    float: left;
+    $width: 55px;
+
+    a {
+      text-align: center;
+      width: $width;
+      height: $width;
+      border: 1px solid #999;
+      border-radius: 0px
+    }
+  }
   .side {
     width: 50%;
     float: left;