Example for custom class and delay

Author: wwayne

example/src/index.js

@@ -173,6 +173,54 @@ const Test = React.createClass({
               </div>
             </pre>
           </div>
+
+          <div className="section">
+            <h4 className='title'>Theme and delay</h4>
+            <p className="sub-title"></p>
+
+            <div className="example-jsx">
+              <div className="side">
+                <a data-for='customer-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
+                <ReactTooltip id='customer-class' class='extraClass' delayHide={1000} effect='solid'/>
+              </div>
+
+              <div className="side">
+                <a data-for='customer-theme' data-tip='custom theme'>(･ω´･ )</a>
+                <ReactTooltip id='customer-theme' class='customeTheme'/>
+              </div>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
+                "<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
+                ".extraClass {\n" +
+                  " font-size: 20px !important;\n" +
+                  " pointer-events: auto !important;\n" +
+                  " &:hover {\n" +
+                    "visibility: visible !important;\n" +
+                    "opacity: 1 !important;\n" +
+                  " }\n" +
+                "}"}</p>
+              </div>
+
+              <div>
+                <p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
+                "<ReactTooltip class='customeTheme'/>\n" +
+                " .customeTheme {\n" +
+                  " color: #ff6e00 !important;\n" +
+                  " background-color: orange !important;\n" +
+                  " &.place-top {\n" +
+                    " &:after {\n" +
+                      " border-top-color: orange !important;\n" +
+                      " border-top-style: solid !important;\n" +
+                      " border-top-width: 6px !important;\n" +
+                    " }\n" +
+                  " }\n" +
+                "}"}</p>
+              </div>
+            </pre>
+          </div>
         </section>
       </div>
     )

example/src/index.scss

@@ -206,3 +206,25 @@ html, body{
     line-height: 30px;
   }
 }
+
+// Extra class for demonstration
+.extraClass {
+  font-size: 20px !important;
+  pointer-events: auto !important;
+  &:hover {
+    visibility: visible !important;
+    opacity: 1 !important;
+ }
+}
+
+.customeTheme {
+  color: #ff6e00 !important;
+  background-color: orange !important;
+  &.place-top {
+    &:after {
+      border-top-color: orange !important;
+      border-top-style: solid !important;
+      border-top-width: 6px !important;
+    }
+  }
+}

src/index.js

@@ -66,7 +66,7 @@ class ReactTooltip extends Component {
   }
 
   componentDidMount () {
-    this.setStyleHeader() // Set default style to the <link>
+    this.setStyleHeader() // Set the style to the <link>
     this.bindListener() // Bind listener for tooltip
     this.bindWindowEvents() // Bind global event for static method
   }
@@ -172,10 +172,10 @@ class ReactTooltip extends Component {
       delayHide: e.currentTarget.getAttribute('data-delay-hide') || this.props.delayHide || 0,
       border: e.currentTarget.getAttribute('data-border') === 'true' || this.props.border || false,
       extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || ''
+    }, () => {
+      this.addScrollListener()
+      this.updateTooltip(e)
     })
-
-    this.addScrollListener()
-    this.updateTooltip(e)
   }
 
   /**
@@ -244,7 +244,6 @@ class ReactTooltip extends Component {
         this.updatePosition()
       })
     }
-
     // Set tooltip position
     node.style.left = result.position.left + 'px'
     node.style.top = result.position.top + 'px'
@@ -283,11 +282,14 @@ class ReactTooltip extends Component {
 
     if (html) {
       return (
-        <div className={`${tooltipClass} ${extraClass}`} data-id='tooltip' dangerouslySetInnerHTML={{__html: placeholder}}></div>
+        <div className={`${tooltipClass} ${extraClass}`}
+          data-id='tooltip'
+          dangerouslySetInnerHTML={{__html: placeholder}}></div>
       )
     } else {
       return (
-        <div className={`${tooltipClass} ${extraClass}`} data-id='tooltip'>{placeholder}</div>
+        <div className={`${tooltipClass} ${extraClass}`}
+          data-id='tooltip'>{placeholder}</div>
       )
     }
   }

src/index.scss

@@ -2,22 +2,30 @@
   background-color: $background-color;
   &.place-top {
     &:after {
-      border-top: 6px solid $background-color;
+      border-top-color: $background-color;
+      border-top-style: solid;
+      border-top-width: 6px;
     }
   }
   &.place-bottom {
     &:after {
-      border-bottom: 6px solid $background-color;
+      border-bottom-color: $background-color;
+      border-bottom-style: solid;
+      border-bottom-width: 6px;
     }
   }
   &.place-left {
     &:after {
-      border-left: 6px solid $background-color;
+      border-left-color: $background-color;
+      border-left-style: solid;
+      border-left-width: 6px;
     }
   }
   &.place-right {
     &:after {
-      border-right: 6px solid $background-color;
+      border-right-color: $background-color;
+      border-right-style: solid;
+      border-right-width: 6px;
     }
   }
 }
@@ -188,4 +196,4 @@
     padding: 2px 0px;
     text-align: center;
   }
-} 
+}