From 7a7fbd59ef78a1435985d53c0cb1704e8e9c60fe Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Mon, 26 Mar 2018 10:08:36 +0800
Subject: [PATCH] fix slider

---
 components/tooltip/demo/placement.md          |  48 ++---
 components/vc-slider/demo/handle.jsx          |  51 +++++
 components/vc-slider/index.js                 |   2 +
 components/vc-slider/src/Handle.jsx           |  51 ++---
 components/vc-slider/src/Range.jsx            |   8 +-
 components/vc-slider/src/Slider.jsx           |  49 +++--
 components/vc-slider/src/common/Steps.jsx     |   6 +-
 components/vc-slider/src/common/Track.jsx     |   7 +-
 .../vc-slider/src/common/createSlider.jsx     |  36 +++-
 .../vc-slider/src/createSliderWithTooltip.jsx |   4 +-
 components/vc-tooltip/Tooltip.jsx             |   2 +-
 .../vc-tooltip/assets/boostrap/anim.less      |  58 ++++++
 components/vc-tooltip/assets/bootstrap.less   | 164 +++++++++++++++
 .../vc-tooltip/assets/bootstrap_white.less    | 190 ++++++++++++++++++
 contributors.md                               |   9 -
 examples/routes.js                            |   2 +-
 16 files changed, 584 insertions(+), 103 deletions(-)
 create mode 100644 components/vc-slider/demo/handle.jsx
 create mode 100644 components/vc-slider/index.js
 create mode 100644 components/vc-tooltip/assets/boostrap/anim.less
 create mode 100644 components/vc-tooltip/assets/bootstrap.less
 create mode 100644 components/vc-tooltip/assets/bootstrap_white.less

diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index 52e346684..dd248b3a6 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -12,84 +12,84 @@ The ToolTip has 12 placements choice.
 <template>
   <div id="components-a-tooltip-demo-placement">
     <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
-      <a-popconfirm placement="topLeft" >
+      <a-tooltip placement="topLeft" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>TL</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="top" >
+      </a-tooltip>
+      <a-tooltip placement="top" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>Top</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="topRight" >
+      </a-tooltip>
+      <a-tooltip placement="topRight" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>TR</a-button>
-      </a-popconfirm>
+      </a-tooltip>
     </div>
     <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
-      <a-popconfirm placement="leftTop" >
+      <a-tooltip placement="leftTop" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>LT</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="left" >
+      </a-tooltip>
+      <a-tooltip placement="left" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>Left</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="leftBottom" >
+      </a-tooltip>
+      <a-tooltip placement="leftBottom" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>LB</a-button>
-      </a-popconfirm>
+      </a-tooltip>
     </div>
     <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
-      <a-popconfirm placement="rightTop" >
+      <a-tooltip placement="rightTop" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>RT</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="right" >
+      </a-tooltip>
+      <a-tooltip placement="right" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>Right</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="rightBottom" >
+      </a-tooltip>
+      <a-tooltip placement="rightBottom" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>RB</a-button>
-      </a-popconfirm>
+      </a-tooltip>
     </div>
     <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
-      <a-popconfirm placement="bottomLeft" >
+      <a-tooltip placement="bottomLeft" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>BL</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="bottom" >
+      </a-tooltip>
+      <a-tooltip placement="bottom" >
         <template slot="title">
             <span>prompt text</span>
         </template>
         <a-button>Bottom</a-button>
-      </a-popconfirm>
-      <a-popconfirm placement="bottomRight" >
+      </a-tooltip>
+      <a-tooltip placement="bottomRight" >
         <template slot="title">
           <span>prompt text</span>
         </template>
         <a-button>BR</a-button>
-      </a-popconfirm>
+      </a-tooltip>
     </div>
   </div>
 </template>
diff --git a/components/vc-slider/demo/handle.jsx b/components/vc-slider/demo/handle.jsx
new file mode 100644
index 000000000..7c4eedae2
--- /dev/null
+++ b/components/vc-slider/demo/handle.jsx
@@ -0,0 +1,51 @@
+import Slider from '../index'
+import Tooltip from '../../vc-tooltip'
+import '../assets/index.less'
+import '../../vc-tooltip/assets/bootstrap.less'
+
+const { createSliderWithTooltip, Handle } = Slider
+const Range = createSliderWithTooltip(Slider.Range)
+
+export default {
+  data () {
+    return {
+    }
+  },
+  render () {
+    const handle = (props) => {
+      const { value, dragging, index, ...restProps } = props
+      const handleProps = {
+        props: {
+          ...restProps,
+          value,
+        },
+        key: index,
+      }
+      return (
+        <Tooltip
+          prefixCls='rc-slider-tooltip'
+          overlay={value}
+          visible={dragging}
+          placement='top'
+          key={index}
+        >
+          <Handle {...handleProps} />
+        </Tooltip>
+      )
+    }
+    const wrapperStyle = 'width: 400px; margin: 50px'
+
+    return (
+      <div>
+        <div style={wrapperStyle}>
+          <p>Slider with custom handle</p>
+          <Slider min={0} max={20} defaultValue={3} handle={handle} />
+        </div>
+        {/* <div style={wrapperStyle}>
+          <p>Range with custom handle</p>
+          <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
+        </div> */}
+      </div>
+    )
+  },
+}
diff --git a/components/vc-slider/index.js b/components/vc-slider/index.js
new file mode 100644
index 000000000..cb6b75867
--- /dev/null
+++ b/components/vc-slider/index.js
@@ -0,0 +1,2 @@
+import Slider from './src/'
+export default Slider
diff --git a/components/vc-slider/src/Handle.jsx b/components/vc-slider/src/Handle.jsx
index 74fc1a8e4..ede4eadc1 100644
--- a/components/vc-slider/src/Handle.jsx
+++ b/components/vc-slider/src/Handle.jsx
@@ -1,8 +1,6 @@
-
-import classNames from 'classnames'
-import PropTypes from '../../../_util/vue-types'
-import addEventListener from '../../../_util/Dom/addEventListener'
-import BaseMixin from '../../../_util/BaseMixin'
+import PropTypes from '../../_util/vue-types'
+import addEventListener from '../../_util/Dom/addEventListener'
+import BaseMixin from '../../_util/BaseMixin'
 
 export default {
   mixins: [BaseMixin],
@@ -15,6 +13,7 @@ export default {
     max: PropTypes.number,
     value: PropTypes.number,
     tabIndex: PropTypes.number,
+    refStr: PropTypes.any,
   },
   data () {
     return {
@@ -24,6 +23,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
+      this.refStr = this.$props.refStr
     })
   },
   beforeDestroy () {
@@ -53,22 +53,21 @@ export default {
       this.focus()
     },
     focus () {
-      this.$refs.handle.focus()
+      this.$refs[this.refStr].focus()
     },
     blur () {
-      this.$refs.handle.blur()
+      this.$refs[this.refStr].blur()
     },
   },
   render () {
     const {
-      prefixCls, vertical, offset, disabled, min, max, value, tabIndex, ...restProps
+      prefixCls, vertical, offset, disabled, min, max, value, tabIndex, refStr, ...restProps
     } = this.$props
 
-    const className = classNames(
-      {
-        [`${prefixCls}-handle-click-focused`]: this.clickFocused,
-      }
-    )
+    const className = {
+      [`${prefixCls}-handle`]: true,
+      [`${prefixCls}-handle-click-focused`]: this.clickFocused,
+    }
 
     const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` }
     const elStyle = {
@@ -84,18 +83,24 @@ export default {
         'aria-disabled': !!disabled,
       }
     }
-
+    const handleProps = {
+      attrs: {
+        role: 'slider',
+        tabIndex: disabled ? null : (tabIndex || 0),
+        ...ariaProps,
+        ...restProps,
+      },
+      style: elStyle,
+      class: className,
+      on: {
+        blur: this.handleBlur,
+        keydown: this.handleKeyDown,
+      },
+      ref: refStr,
+    }
     return (
       <div
-        ref='handle'
-        role='slider'
-        tabIndex= {disabled ? null : (tabIndex || 0)}
-        {...ariaProps}
-        {...restProps}
-        class={className}
-        style={elStyle}
-        onBlur={this.handleBlur}
-        onKeydown={this.handleKeyDown}
+        {...handleProps}
       />
     )
   },
diff --git a/components/vc-slider/src/Range.jsx b/components/vc-slider/src/Range.jsx
index 7beeacf53..f0cfa1ce2 100644
--- a/components/vc-slider/src/Range.jsx
+++ b/components/vc-slider/src/Range.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import PropTypes from '../../../_util/vue-types'
-import BaseMixin from '../../../_util/BaseMixin'
-import { initDefaultProps, hasProp } from '../../../_util/props-util'
+import PropTypes from '../../_util/vue-types'
+import BaseMixin from '../../_util/BaseMixin'
+import { initDefaultProps, hasProp } from '../../_util/props-util'
 import Track from './common/Track'
 import createSlider from './common/createSlider'
 import * as utils from './utils'
@@ -334,7 +334,7 @@ const Range = {
       max,
       disabled,
       style: handleStyle[i],
-      ref: h => this.saveHandle(i, h),
+      refStr: 'handleRef' + i,
     }))
 
     const tracks = bounds.slice(0, -1).map((_, index) => {
diff --git a/components/vc-slider/src/Slider.jsx b/components/vc-slider/src/Slider.jsx
index de836d369..f86cd57f4 100644
--- a/components/vc-slider/src/Slider.jsx
+++ b/components/vc-slider/src/Slider.jsx
@@ -1,7 +1,7 @@
-import PropTypes from '../../../_util/vue-types'
-import warning from '../../../_util/warning'
-import BaseMixin from '../../../_util/BaseMixin'
-import { hasProp } from '../../../_util/props-util'
+import PropTypes from '../../_util/vue-types'
+import warning from '../../_util/warning'
+import BaseMixin from '../../_util/BaseMixin'
+import { hasProp } from '../../_util/props-util'
 import Track from './common/Track'
 import createSlider from './common/createSlider'
 import * as utils from './utils'
@@ -136,6 +136,21 @@ const Slider = {
       const val = utils.ensureValueInRange(v, mergedProps)
       return utils.ensureValuePrecision(val, mergedProps)
     },
+    getTrack ({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }) {
+      return (
+        <Track
+          class={`${prefixCls}-track`}
+          vertical={vertical}
+          included={included}
+          offset={0}
+          length={offset}
+          style={{
+            ...minimumTrackStyle,
+            ..._trackStyle,
+          }}
+        />
+      )
+    },
   },
   render () {
     const {
@@ -151,14 +166,14 @@ const Slider = {
       max,
       handle: handleGenerator,
     } = this
-    const { value, dragging } = this.state
-    const offset = this.calcOffset(value)
+    const { sValue, dragging } = this
+    const offset = this.calcOffset(sValue)
     const handle = handleGenerator({
       className: `${prefixCls}-handle`,
       prefixCls,
       vertical,
       offset,
-      value,
+      value: sValue,
       dragging,
       disabled,
       min,
@@ -166,24 +181,14 @@ const Slider = {
       index: 0,
       tabIndex,
       style: handleStyle[0] || handleStyle,
-      ref: h => this.saveHandle(0, h),
+      refStr: 'handleRef0',
     })
 
     const _trackStyle = trackStyle[0] || trackStyle
-    const track = (
-      <Track
-        class={`${prefixCls}-track`}
-        vertical={vertical}
-        included={included}
-        offset={0}
-        length={offset}
-        style={{
-          ...minimumTrackStyle,
-          ..._trackStyle,
-        }}
-      />
-    )
-    return { tracks: track, handles: handle }
+    return {
+      tracks: this.getTrack({ prefixCls, vertical, included, offset, minimumTrackStyle, _trackStyle }),
+      handles: handle,
+    }
   },
 }
 
diff --git a/components/vc-slider/src/common/Steps.jsx b/components/vc-slider/src/common/Steps.jsx
index f9a734b4c..047a4db62 100644
--- a/components/vc-slider/src/common/Steps.jsx
+++ b/components/vc-slider/src/common/Steps.jsx
@@ -20,7 +20,7 @@ const Steps = {
   functional: true,
   render (createElement, context) {
     const { prefixCls, vertical, marks, dots, step, included,
-      lowerBound, upperBound, max, min, dotStyle, activeDotStyle } = context.data
+      lowerBound, upperBound, max, min, dotStyle, activeDotStyle } = context.props
     const range = max - min
     const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
       const offset = `${Math.abs(point - min) / range * 100}%`
@@ -37,10 +37,10 @@ const Steps = {
         [`${prefixCls}-dot-active`]: isActived,
       })
 
-      return <span className={pointClassName} style={style} key={point} />
+      return <span class={pointClassName} style={style} key={point} />
     })
 
-    return <div className={`${prefixCls}-step`}>{elements}</div>
+    return <div class={`${prefixCls}-step`}>{elements}</div>
   },
 }
 
diff --git a/components/vc-slider/src/common/Track.jsx b/components/vc-slider/src/common/Track.jsx
index 3f129ab2b..8e7e5dc5f 100644
--- a/components/vc-slider/src/common/Track.jsx
+++ b/components/vc-slider/src/common/Track.jsx
@@ -2,7 +2,8 @@
 const Track = {
   functional: true,
   render (createElement, context) {
-    const { included, vertical, offset, length, style } = context.data
+    const { included, vertical, offset, length } = context.props
+    const { style, class: className } = context.data
 
     const positonStyle = vertical ? {
       bottom: `${offset}%`,
@@ -12,11 +13,11 @@ const Track = {
       width: `${length}%`,
     }
 
-    context.data.style = {
+    const elStyle = {
       ...style,
       ...positonStyle,
     }
-    return included ? createElement('div', context.data, context.children) : null
+    return included ? <div class={className} style={elStyle} /> : null
   },
 }
 
diff --git a/components/vc-slider/src/common/createSlider.jsx b/components/vc-slider/src/common/createSlider.jsx
index 1fdbd0256..1a3764a39 100644
--- a/components/vc-slider/src/common/createSlider.jsx
+++ b/components/vc-slider/src/common/createSlider.jsx
@@ -34,6 +34,7 @@ export default function createSlider (Component) {
     autoFocus: PropTypes.bool,
   }
   return {
+    mixins: [Component],
     props: initDefaultProps(propTypes, {
       ...Component.defaultProps,
       prefixCls: 'rc-slider',
@@ -43,7 +44,13 @@ export default function createSlider (Component) {
       marks: {},
       handle ({ index, ...restProps }) {
         delete restProps.dragging
-        return <Handle {...restProps} key={index} />
+        const handleProps = {
+          props: {
+            ...restProps,
+          },
+          key: index,
+        }
+        return <Handle {...handleProps} />
       },
       included: true,
       disabled: false,
@@ -65,7 +72,7 @@ export default function createSlider (Component) {
           step
         )
       }
-      this.handlesRefs = {}
+      this.handlesRefs = []
       return {}
     },
     beforeDestroy () {
@@ -78,9 +85,19 @@ export default function createSlider (Component) {
       this.$nextTick(() => {
         // Snapshot testing cannot handle refs, so be sure to null-check this.
         this.document = this.$refs.sliderRef && this.$refs.sliderRef.ownerDocument
+        this.setHandleRefs()
       })
     },
     methods: {
+      setHandleRefs () {
+        const refs = this.$refs
+        Object.keys(refs).map((item) => {
+          if (item.indexOf('handlesRefs') > -1) {
+            const handleArr = item.split('handlesRefs')
+            this.handlesRefs[handleArr[1]] = item
+          }
+        })
+      },
       onMouseDown (e) {
         if (e.button !== 0) { return }
         const isVertical = this.vertical
@@ -208,13 +225,10 @@ export default function createSlider (Component) {
         return nextValue
       },
       calcOffset (value) {
-        const { min, max } = this.props
+        const { min, max } = this
         const ratio = (value - min) / (max - min)
         return ratio * 100
       },
-      saveHandle (index, handle) {
-        this.handlesRefs[index] = handle
-      },
       onClickMarkLabel (e, value) {
         e.stopPropagation()
         this.$emit('change', { value })
@@ -236,7 +250,7 @@ export default function createSlider (Component) {
         dotStyle,
         activeDotStyle,
       } = this
-      const { tracks, handles } = super.render()
+      const { tracks, handles } = Component.render.call(this)
 
       const sliderClassName = classNames(prefixCls, {
         [`${prefixCls}-with-marks`]: Object.keys(marks).length,
@@ -262,10 +276,10 @@ export default function createSlider (Component) {
         <div
           ref='sliderRef'
           class={sliderClassName}
-          onTouchStart={disabled ? noop : this.onTouchStart}
-          onMouseDown={disabled ? noop : this.onMouseDown}
-          onMouseUp={disabled ? noop : this.onMouseUp}
-          onKeyDown={disabled ? noop : this.onKeyDown}
+          onTouchstart={disabled ? noop : this.onTouchStart}
+          onMousedown={disabled ? noop : this.onMouseDown}
+          onMouseup={disabled ? noop : this.onMouseUp}
+          onKeydown={disabled ? noop : this.onKeyDown}
           onFocus={disabled ? noop : this.onFocus}
           onBlur={disabled ? noop : this.onBlur}
         >
diff --git a/components/vc-slider/src/createSliderWithTooltip.jsx b/components/vc-slider/src/createSliderWithTooltip.jsx
index 23441d6be..a315eceb5 100644
--- a/components/vc-slider/src/createSliderWithTooltip.jsx
+++ b/components/vc-slider/src/createSliderWithTooltip.jsx
@@ -1,5 +1,5 @@
-import PropTypes from '../../../_util/vue-types'
-import BaseMixin from '../../../_util/BaseMixin'
+import PropTypes from '../../_util/vue-types'
+import BaseMixin from '../../_util/BaseMixin'
 import Tooltip from '../../vc-tooltip'
 import Handle from './Handle'
 
diff --git a/components/vc-tooltip/Tooltip.jsx b/components/vc-tooltip/Tooltip.jsx
index 81208bb61..d955dfb32 100644
--- a/components/vc-tooltip/Tooltip.jsx
+++ b/components/vc-tooltip/Tooltip.jsx
@@ -64,6 +64,7 @@ export default {
     }
     const triggerProps = {
       props: {
+        ...extraProps,
         popupClassName: overlayClassName,
         prefixCls: prefixCls,
         action: trigger,
@@ -79,7 +80,6 @@ export default {
         mouseLeaveDelay: mouseLeaveDelay,
         popupStyle: overlayStyle,
         mouseEnterDelay: mouseEnterDelay,
-        ...extraProps,
       },
       on: {
         popupVisibleChange: this.$listeners.visibleChange || noop,
diff --git a/components/vc-tooltip/assets/boostrap/anim.less b/components/vc-tooltip/assets/boostrap/anim.less
new file mode 100644
index 000000000..696850a3b
--- /dev/null
+++ b/components/vc-tooltip/assets/boostrap/anim.less
@@ -0,0 +1,58 @@
+.@{tooltip-prefix-cls} {
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+  }
+
+  &&-zoom-enter, &&-zoom-leave {
+    display: block;
+  }
+
+  &-zoom-enter, &-zoom-appear {
+    opacity: 0;
+    .effect();
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    animation-play-state: paused;
+  }
+
+  &-zoom-leave {
+    .effect();
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+    animation-play-state: paused;
+  }
+
+  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+    animation-name: rcToolTipZoomIn;
+    animation-play-state: running;
+  }
+
+  &-zoom-leave&-zoom-leave-active {
+    animation-name: rcToolTipZoomOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcToolTipZoomIn {
+    0% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+  }
+  @keyframes rcToolTipZoomOut {
+    0% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/vc-tooltip/assets/bootstrap.less b/components/vc-tooltip/assets/bootstrap.less
new file mode 100644
index 000000000..6ecc46c3e
--- /dev/null
+++ b/components/vc-tooltip/assets/bootstrap.less
@@ -0,0 +1,164 @@
+@import "boostrap/anim.less";
+
+@tooltip-prefix-cls: rc-tooltip;
+
+//
+// Tooltips
+// --------------------------------------------------
+@font-size-base         : 12px;
+@line-height-base       : 1.5;
+@border-radius-base     : 6px;
+@overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: #373737;
+@tooltip-opacity: 0.9;
+
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip distance with trigger
+@tooltip-distance: @tooltip-arrow-width + 4;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// Base class
+.@{tooltip-prefix-cls} {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  // remove left/top by yiminghe
+  // left: -9999px;
+  // top: -9999px;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  opacity: @tooltip-opacity;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-placement-top, &-placement-topLeft, &-placement-topRight {
+    padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+  }
+  &-placement-right, &-placement-rightTop, &-placement-rightBottom {
+    padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
+  }
+  &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
+    padding: @tooltip-distance 0 @tooltip-arrow-width 0;
+  }
+  &-placement-left, &-placement-leftTop, &-placement-leftBottom {
+    padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
+  }
+}
+
+// Wrapper for the tooltip content
+.@{tooltip-prefix-cls}-inner {
+  padding: 8px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+  box-shadow: @overlay-shadow;
+  min-height: 34px;
+}
+
+// Arrows
+.@{tooltip-prefix-cls}-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltip-prefix-cls} {
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+  }
+
+  &-placement-topLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-topRight &-arrow {
+    right: 15%;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: @tooltip-distance - @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+  }
+
+  &-placement-rightTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: @tooltip-distance - @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+  }
+
+  &-placement-leftTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: @tooltip-distance - @tooltip-arrow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: 15%;
+  }
+}
+
diff --git a/components/vc-tooltip/assets/bootstrap_white.less b/components/vc-tooltip/assets/bootstrap_white.less
new file mode 100644
index 000000000..ae4f00044
--- /dev/null
+++ b/components/vc-tooltip/assets/bootstrap_white.less
@@ -0,0 +1,190 @@
+@import "boostrap/anim.less";
+
+@tooltip-prefix-cls: rc-tooltip;
+
+//
+// Tooltips
+// --------------------------------------------------
+@font-size-base         : 12px;
+@line-height-base       : 1.5;
+@border-radius-base     : 3px;
+@overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);
+//** Tooltip text color
+@tooltip-color: #333333;
+//** Tooltip background color
+@tooltip-bg: #ffffff;
+@tooltip-opacity: 0.9;
+
+@tooltip-border-width: 1px;
+@tooltip-border-color: #b1b1b1;
+@tooltip-shadow-width: 1px;
+
+//** Tooltip arrow width
+@tooltip-arrow-width: 6px;
+//** Tooltip distance with trigger
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-border-color;
+@tooltip-arrow-inner-color: @tooltip-bg;
+
+// Base class
+.@{tooltip-prefix-cls} {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  line-height: @line-height-base;
+  font-size: @font-size-base;
+  background-color:rgba(0, 0, 0, 0.05);
+  padding: @tooltip-shadow-width;
+  opacity: @tooltip-opacity;
+
+  &-hidden {
+    display: none;
+  }
+}
+
+// Wrapper for the tooltip content
+.@{tooltip-prefix-cls}-inner {
+  padding: 8px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+  min-height: 34px;
+  border:@tooltip-border-width solid @tooltip-border-color;
+}
+
+// Arrows
+.@{tooltip-prefix-cls}-arrow,
+.@{tooltip-prefix-cls}-arrow-inner{
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltip-prefix-cls} {
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow{
+    bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+
+  &-placement-top &-arrow-inner,
+  &-placement-topLeft &-arrow-inner,
+  &-placement-topRight &-arrow-inner{
+    bottom: @tooltip-border-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+  }
+
+  &-placement-topLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-topRight &-arrow {
+    right: 15%;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+
+  &-placement-right &-arrow-inner,
+  &-placement-rightTop &-arrow-inner,
+  &-placement-rightBottom &-arrow-inner {
+    left: @tooltip-border-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+  }
+
+  &-placement-rightTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+
+  &-placement-left &-arrow-inner,
+  &-placement-leftTop &-arrow-inner,
+  &-placement-leftBottom &-arrow-inner {
+    right: @tooltip-border-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+  }
+
+  &-placement-leftTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: -@tooltip-arrow-width + @tooltip-shadow-width;;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+
+  &-placement-bottom &-arrow-inner,
+  &-placement-bottomLeft &-arrow-inner,
+  &-placement-bottomRight &-arrow-inner {
+    top: @tooltip-border-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: 15%;
+  }
+}
diff --git a/contributors.md b/contributors.md
index 49cda4dac..fadb8c3d6 100644
--- a/contributors.md
+++ b/contributors.md
@@ -55,12 +55,3 @@ Slider
 Table
 Timeline
 Transfer
-
-
-
-
-
-
-
-
-
diff --git a/examples/routes.js b/examples/routes.js
index 73e054488..136f1b381 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/popconfirm/demo/${d}`),
+    component: import(`../components/vc-slider/demo/${d}`),
   }
 }
 export default [