support delay for 2.3.0. Fixes #7

react-component · Jul 7, 2015 · e71bfe6 · e71bfe6
1 parent 6cc61f0
commit e71bfe6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 6 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,10 @@
 # History
 ----
 
+### 2.3.0 / 2015-07-07
+
+`new` [#7](https://github.com/react-component/tooltip/issues/7) support delay prop
+
 ### 2.2.0 / 2015-06-30
 
 - use mask instead of document click

diff --git a/README.md b/README.md
@@ -68,6 +68,12 @@ online example: http://react-component.github.io/tooltip/examples/
     </tr>
     </thead>
     <tbody>
+        <tr>
+          <td>delay</td>
+          <td>number</td>
+          <td></td>
+          <td>delay time to show or hide, only valid for hover trigger.unit: s.</td>
+        </tr>
         <tr>
           <td>overlayStyle</td>
           <td>Object</td>

diff --git a/examples/simple.js b/examples/simple.js
@@ -84,6 +84,7 @@ var Test = React.createClass({
       </div>
       <div style={{margin: 100}}>
         <Tooltip placement={this.state.placement}
+          delay={0.1}
           renderPopupToBody={this.props.renderPopupToBody}
           trigger={Object.keys(this.state.trigger)}
           onVisibleChange={this.onVisibleChange}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-tooltip",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "tooltip ui component for react",
   "keywords": [
     "react",

diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx
@@ -85,12 +85,27 @@ class Tooltip extends React.Component {
     }
   }
 
-  show() {
-    this.setVisible(true);
+  delaySetVisible(visible, e) {
+    var delay = this.props.delay * 1000;
+    if (delay && e && e.type.indexOf('mouse') !== -1) {
+      if (this.delayTimer) {
+        clearTimeout(this.delayTimer);
+      }
+      this.delayTimer = setTimeout(() => {
+        this.setVisible(visible);
+        this.delayTimer = null;
+      }, delay);
+    } else {
+      this.setVisible(visible);
+    }
+  }
+
+  show(e) {
+    this.delaySetVisible(true, e);
   }
 
-  hide() {
-    this.setVisible(false);
+  hide(e) {
+    this.delaySetVisible(false, e);
   }
 
   componentDidMount() {
@@ -157,14 +172,16 @@ Tooltip.propTypes = {
   renderPopupToBody: React.PropTypes.bool,
   overlay: React.PropTypes.node.isRequired,
   overlayStyle: React.PropTypes.object,
-  wrapStyle: React.PropTypes.object
+  wrapStyle: React.PropTypes.object,
+  delay: React.PropTypes.number
 };
 
 Tooltip.defaultProps = {
   prefixCls: 'rc-tooltip',
   renderPopupToBody: true,
   onVisibleChange: function () {
   },
+  delay: 0,
   overlayStyle: {},
   wrapStyle: {},
   placement: 'right',