Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	src/index.js

Author: an4ger

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

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>
     )

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;