add toolTip

components/_util/vnode.js

@@ -93,3 +93,15 @@ export function cloneElement (n, nodeProps, clone) {
 export function getComponentName (opts) {
   return opts && (opts.Ctor.options.name || opts.tag)
 }
+
+export function isValidElement (ele) {
+  return !!ele.tag
+}
+
+export function getClass (ele) {
+  return ele.data && (ele.data.class || ele.data.staticClass)
+}
+
+export function getStyle (ele) {
+  return ele.data && (ele.data.style || ele.data.staticStyle)
+}

components/button/button.vue

@@ -4,6 +4,7 @@ const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 export default {
   name: 'Button',
+  __ANT_BUTTON: true,
   components: { Icon },
   props: {
     prefixCls: {

components/index.js

@@ -10,7 +10,7 @@ export { default as Grid } from './grid'
 
 export { default as Rate } from './rate'
 
-export { default as ToolTip } from './tooltip'
+export { default as Tooltip } from './tooltip'
 
 export { default as Pagination } from './pagination'
 

components/style.js

@@ -10,5 +10,6 @@ import './avatar/style'
 import './badge/style'
 import './tabs/style'
 import './input/style'
+import './tooltip/style'
 
 import './menu/style'

components/tooltip/demo/arrow-point-at-center.vue

@@ -0,0 +1,24 @@
+<template>
+<div>
+<md>
+## 箭头指向
+设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
+</md>
+  <Tooltip placement="topLeft" title="Prompt Text">
+    <AntButton>Align edge / 边缘对齐</AntButton>
+  </Tooltip>
+  <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
+    <AntButton>Arrow points to center / 箭头指向中心</AntButton>
+  </Tooltip>
+</div>
+</template>
+
+<script>
+import { Tooltip, Button } from 'antd'
+export default {
+  components: {
+    Tooltip,
+    AntButton: Button,
+  },
+}
+</script>

components/tooltip/demo/auto-adjust-overflow.vue

@@ -0,0 +1,43 @@
+<template>
+<div>
+  <md>
+  ## 自动调整位置
+  气泡框不可见时自动调整位置。
+  </md>
+  <div :style="wrapStyles">
+    <Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
+      <AntButton>Adjust automatically / 自动调整</AntButton>
+    </Tooltip>
+    <br />
+    <Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
+      <AntButton>Ingore / 不处理</AntButton>
+    </Tooltip>
+  </div>
+</div>
+</template>
+
+<script>
+import { Tooltip, Button } from 'antd'
+const wrapStyles = {
+  overflow: 'hidden',
+  position: 'relative',
+  padding: '24px',
+  border: '1px solid #e9e9e9',
+}
+export default {
+  data () {
+    return {
+      wrapStyles,
+    }
+  },
+  methods: {
+    getPopupContainer (trigger) {
+      return trigger.parentElement
+    },
+  },
+  components: {
+    Tooltip,
+    AntButton: Button,
+  },
+}
+</script>

components/tooltip/demo/basic.vue

@@ -0,0 +1,23 @@
+<template>
+<div>
+<md>
+## 基本
+最简单的用法。
+</md>
+<Tooltip>
+  <template slot='title'>
+    prompt text
+  </template>
+  Tooltip will show when mouse enter.
+</Tooltip>
+</div>
+</template>
+
+<script>
+import { Tooltip } from 'antd'
+export default {
+  components: {
+    Tooltip,
+  },
+}
+</script>

components/tooltip/demo/index.vue

@@ -1,97 +1,26 @@
 <template>
   <div>
-    <tool-tip
+    <h1>Basic</h1>
-      placement="top"
+    <Basic />
-      :title="showText"
+    <h1>ArrowCenter</h1>
-      :autoAdjustOverflow="autoAdjustOverflow"
+    <ArrowCenter />
-    >
+    <h1>AutoAdjust</h1>
-      <h1 @click="boom" class="test">撞到边缘翻转位置 & 点击更新</h1>
+    <AutoAdjust />
-    </tool-tip>
+    <h1>Placement</h1>
-    <ant-button @click="reverse" type="primary">{{autoAdjustOverflow ? '启用' : '关闭'}}自动调整中</ant-button>
+    <Placement />
-    <div class="box">
-      <h2>切换arrowPointAtCenter模式</h2>
-      <ant-button @click="change">{{arrowPointAtCenter}}</ant-button>
-      <table>
-        <tr v-for="(tr, index) in table" :key="index">
-          <td v-for="(td, i) in tr" :key="i">
-            <tool-tip
-              v-if="td"
-              :placement="td"
-              :title="td"
-              :arrowPointAtCenter="arrowPointAtCenter"
-            >
-              <AntButton type="primary">{{td}}</AntButton>
-            </tool-tip>
-          </td>
-        </tr>
-      </table>
-    </div>
-    <div>
-      <p>
-        <tool-tip :arrowPointAtCenter="true" title="Consider using the NamedModulesPlugin for module names." placement="topLeft">
-          <ant-button>arrowPointAtCenter arrowPointAtCenter arrowPointAtCenter</ant-button>
-        </tool-tip>
-      </p>
-    </div>
   </div>
 </template>
-
 <script>
-  import { ToolTip, Button } from 'antd'
+import Basic from './basic'
-  import 'antd/button/style'
+import ArrowCenter from './arrow-point-at-center'
-	export default {
+import AutoAdjust from './auto-adjust-overflow'
-		name: 'tooltip-basic',
+import Placement from './placement'
-		data() {
+export default {
-			return {
+  components: {
-        show: true,
+    Basic,
-        showText: '你好啊，233',
+    ArrowCenter,
-        table: [
+    AutoAdjust,
-          ['', 'topLeft', 'top', 'topRight', ''],
+    Placement,
-          ['leftTop', '', '', '', 'rightTop'],
+  },
-          ['left', '', '', '', 'right'],
+}
-          ['leftBottom', '', '', '', 'rightBottom'],
-          ['', 'bottomLeft', 'bottom', 'bottomRight', ''],
-        ],
-        arrowPointAtCenter: false,
-        autoAdjustOverflow: true,
-      }
-		},
-    methods: {
-		  boom() {
-		    if (this.showText.length % 20) {
-          this.showText += '3'
-        } else {
-		      this.showText += ' '
-        }
-      },
-      change() {
-		    this.arrowPointAtCenter = !this.arrowPointAtCenter
-      },
-      reverse() {
-		    this.autoAdjustOverflow = !this.autoAdjustOverflow
-      }
-    },
-    components: {
-		  ToolTip,
-      AntButton: Button,
-    }
-	}
 </script>
-<style scoped lang="less">
-  .test {
-    margin: 20px;
-    display: inline-block;
-  }
-  .box {
-    margin: 100px;
-  }
-  table {
-    td {
-      padding: 20px;
-    }
-    p {
-      text-align: center;
-      vertical-align: middle;
-    }
-  }
-</style>

components/tooltip/demo/placement.vue

@@ -0,0 +1,112 @@
+<template>
+<div id="components-tooltip-demo-placement">
+<md>
+## 位置
+位置有 12 个方向。
+</md>
+  <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
+    <Tooltip placement="topLeft">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>TL</AntButton>
+    </Tooltip>
+    <Tooltip placement="top">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>Top</AntButton>
+    </Tooltip>
+    <Tooltip placement="topRight">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>TR</AntButton>
+    </Tooltip>
+  </div>
+  <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
+    <Tooltip placement="leftTop">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>LT</AntButton>
+    </Tooltip>
+    <Tooltip placement="left">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>Left</AntButton>
+    </Tooltip>
+    <Tooltip placement="leftBottom">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>LB</AntButton>
+    </Tooltip>
+  </div>
+  <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
+    <Tooltip placement="rightTop">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>RT</AntButton>
+    </Tooltip>
+    <Tooltip placement="right">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>Right</AntButton>
+    </Tooltip>
+    <Tooltip placement="rightBottom">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>RB</AntButton>
+    </Tooltip>
+  </div>
+  <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
+    <Tooltip placement="bottomLeft">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>BL</AntButton>
+    </Tooltip>
+    <Tooltip placement="bottom">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>Bottom</AntButton>
+    </Tooltip>
+    <Tooltip placement="bottomRight">
+      <template slot="title">
+        <span>prompt text</span>
+      </template>
+      <AntButton>BR</AntButton>
+    </Tooltip>
+  </div>
+</div>
+</template>
+
+<script>
+import { Tooltip, Button } from 'antd'
+export default {
+  data () {
+    return {
+      buttonWidth: 70,
+    }
+  },
+  components: {
+    Tooltip,
+    AntButton: Button,
+  },
+}
+</script>
+<style>
+#components-tooltip-demo-placement .ant-btn {
+  width: 70px;
+  text-align: center;
+  padding: 0;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+</style>

components/tooltip/index.js

@@ -1,4 +1,3 @@
 import ToolTip from './tooltip.vue'
-import './style'
 export default ToolTip
 

components/tooltip/placements.js

@@ -0,0 +1,88 @@
+import { placements as rcPlacements } from './src/placements'
+
+const autoAdjustOverflowEnabled = {
+  adjustX: 1,
+  adjustY: 1,
+}
+
+const autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0,
+}
+
+const targetOffset = [0, 0]
+
+export function getOverflowOptions (autoAdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled
+  }
+  return {
+    ...autoAdjustOverflowDisabled,
+    ...autoAdjustOverflow,
+  }
+}
+
+export default function getPlacements (config) {
+  const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12, autoAdjustOverflow = true } = config
+  const placementMap = {
+    left: {
+      points: ['cr', 'cl'],
+      offset: [-4, 0],
+    },
+    right: {
+      points: ['cl', 'cr'],
+      offset: [4, 0],
+    },
+    top: {
+      points: ['bc', 'tc'],
+      offset: [0, -4],
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      offset: [0, 4],
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      offset: [horizontalArrowShift + arrowWidth, -4],
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      offset: [horizontalArrowShift + arrowWidth, 4],
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      offset: [4, verticalArrowShift + arrowWidth],
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      offset: [-4, verticalArrowShift + arrowWidth],
+    },
+  }
+  Object.keys(placementMap).forEach(key => {
+    placementMap[key] = config.arrowPointAtCenter ? {
+      ...placementMap[key],
+      overflow: getOverflowOptions(autoAdjustOverflow),
+      targetOffset,
+    } : {
+      ...rcPlacements[key],
+      overflow: getOverflowOptions(autoAdjustOverflow),
+    }
+  })
+  return placementMap
+}

components/tooltip/src/Tooltip.vue

@@ -0,0 +1,108 @@
+<script>
+import PropTypes from '../../_util/vue-types'
+import Trigger from '../../trigger'
+import { placements } from './placements'
+import hasProp from '../../_util/hasProp'
+export default {
+  props: {
+    trigger: PropTypes.any.def(['hover']),
+    defaultVisible: PropTypes.bool,
+    visible: PropTypes.bool,
+    placement: PropTypes.string.def('right'),
+    transitionName: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
+    animation: PropTypes.any,
+    // onVisibleChange: PropTypes.func,
+    afterVisibleChange: PropTypes.func.def(() => {}),
+    overlay: PropTypes.any,
+    overlayStyle: PropTypes.object,
+    overlayClassName: PropTypes.string,
+    prefixCls: PropTypes.string.def('rc-tooltip'),
+    mouseEnterDelay: PropTypes.number.def(0),
+    mouseLeaveDelay: PropTypes.number.def(0.1),
+    getTooltipContainer: PropTypes.func,
+    destroyTooltipOnHide: PropTypes.bool.def(false),
+    align: PropTypes.object.def({}),
+    arrowContent: PropTypes.any.def(null),
+    tipId: PropTypes.string,
+    builtinPlacements: PropTypes.object,
+  },
+  methods: {
+    getPopupElement (h) {
+      const { arrowContent, overlay, prefixCls, tipId } = this.$props
+      return ([
+        <div class={`${prefixCls}-arrow`} key='arrow'>
+          {this.$slots.arrowContent}
+          {typeof arrowContent === 'function' ? arrowContent(h) : arrowContent}
+        </div>,
+        <div class={`${prefixCls}-inner`} key='content' id={tipId}>
+          {typeof overlay === 'function' ? overlay(h) : overlay}
+          {this.$slots.overlay}
+        </div>,
+      ])
+    },
+
+    getPopupDomNode () {
+      return this.$refs.trigger.getPopupDomNode()
+    },
+    onVisibleChange (val) {
+      this.$emit('visibleChange', val)
+    },
+    onPopupAlign () {
+      this.$emit('popupAlign', ...arguments)
+    },
+  },
+  render (h) {
+    const {
+      overlayClassName, trigger,
+      mouseEnterDelay, mouseLeaveDelay,
+      overlayStyle, prefixCls,
+      afterVisibleChange,
+      transitionName, animation,
+      placement, align,
+      destroyTooltipOnHide,
+      defaultVisible, getTooltipContainer,
+      ...restProps
+    } = this.$props
+    const extraProps = { ...restProps }
+    if (hasProp(this, 'visible')) {
+      extraProps.popupVisible = this.$props.visible
+    }
+    const triggerProps = {
+      props: {
+        popupClassName: overlayClassName,
+        prefixCls: prefixCls,
+        action: trigger,
+        builtinPlacements: placements,
+        popupPlacement: placement,
+        popupAlign: align,
+        getPopupContainer: getTooltipContainer,
+        // onPopupVisibleChange: onVisibleChange,
+        afterPopupVisibleChange: afterVisibleChange,
+        popupTransitionName: transitionName,
+        popupAnimation: animation,
+        defaultPopupVisible: defaultVisible,
+        destroyPopupOnHide: destroyTooltipOnHide,
+        mouseLeaveDelay: mouseLeaveDelay,
+        popupStyle: overlayStyle,
+        mouseEnterDelay: mouseEnterDelay,
+        ...extraProps,
+      },
+      on: {
+        popupVisibleChange: this.onVisibleChange,
+        popupAlign: this.onPopupAlign,
+      },
+      ref: 'trigger',
+    }
+    return (<Trigger {...triggerProps}>
+      <template slot='popup'>
+        {this.getPopupElement(h)}
+      </template>
+      {this.$slots.default}
+    </Trigger>)
+  },
+}
+
+</script>

components/tooltip/src/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip'
+
+export default Tooltip

components/tooltip/src/placements.js

@@ -0,0 +1,83 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+}
+
+const targetOffset = [0, 0]
+
+export const placements = {
+  left: {
+    points: ['cr', 'cl'],
+    overflow: autoAdjustOverflow,
+    offset: [-4, 0],
+    targetOffset,
+  },
+  right: {
+    points: ['cl', 'cr'],
+    overflow: autoAdjustOverflow,
+    offset: [4, 0],
+    targetOffset,
+  },
+  top: {
+    points: ['bc', 'tc'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  leftTop: {
+    points: ['tr', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [-4, 0],
+    targetOffset,
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  rightTop: {
+    points: ['tl', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [4, 0],
+    targetOffset,
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  rightBottom: {
+    points: ['bl', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [4, 0],
+    targetOffset,
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  leftBottom: {
+    points: ['br', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [-4, 0],
+    targetOffset,
+  },
+}
+
+export default placements

components/tooltip/tooltip.vue

@@ -1,121 +1,137 @@
 <script>
-import Vue from 'vue'
+import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode'
+import RcTooltip from './src/tooltip'
+import getPlacements from './placements'
+import PropTypes from '../_util/vue-types'
+import hasProp from '../_util/hasProp'
+
+const splitObject = (obj, keys) => {
+  const picked = {}
+  const omited = { ...obj }
+  keys.forEach(key => {
+    if (obj && key in obj) {
+      picked[key] = obj[key]
+      delete omited[key]
+    }
+  })
+  return { picked, omited }
+}
+
 export default {
-  name: 'ToolTip',
+  name: 'Tooltip',
   props: {
-    title: String,
+    trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def(['hover']),
-    prefixCls: {
+    visible: PropTypes.bool,
-      default: 'ant-tooltip',
+    title: PropTypes.any,
-    },
+    placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom',
-    placement: {
+      'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
-      default: 'top',
+      'leftTop', 'leftBottom', 'rightTop', 'rightBottom']).def('top'),
-      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val),
+    transitionName: PropTypes.string.def('zoom-big-fast'),
-    },
+    // onVisibleChange: PropTypes.func,
-    transitionName: {
+    overlayStyle: PropTypes.object,
-      default: 'zoom-big-fast',
+    overlayClassName: PropTypes.string,
-    },
+    prefixCls: PropTypes.string.def('ant-tooltip'),
-    mouseEnterDelay: {
+    mouseEnterDelay: PropTypes.number.def(0.1),
-      default: 0.1,
+    mouseLeaveDelay: PropTypes.number.def(0.1),
-    },
+    getTooltipContainer: PropTypes.func,
-    mouseLeaveDelay: {
+    getPopupContainer: PropTypes.func,
-      default: 0.1,
+    arrowPointAtCenter: PropTypes.bool.def(false),
-    },
+    autoAdjustOverflow: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(true),
-    arrowPointAtCenter: {
-      default: false,
-    },
-    autoAdjustOverflow: {
-      default: true,
-    },
   },
   data () {
     return {
-      vnode: null,
+      sVisible: !!this.$props.visible,
-      visible: false,
-      left: 0,
-      top: 0,
-      realPlacement: this.placement,
-      t1: null,
-      t2: null,
     }
   },
-  computed: {
+  watch: {
-    classes () {
+    visible (val) {
-      const { prefixCls } = this
+      this.sVisible = val
-      return {
-        [`${prefixCls}`]: true,
-      }
     },
   },
   methods: {
-    checkPosition (popup, text, placement) {
+    onVisibleChange (visible) {
-      const { top, left, bottom, right } = text
+      if (!hasProp(this, 'visible')) {
-      const reg = /(top|bottom|left|right)(.*)/
+        this.sVisible = this.isNoTitle() ? false : visible
-      const [, abstractPos, suffix] = placement.match(reg)
-      let ret = placement
-      // we can change the position many times
-      if (abstractPos === 'left' && left < popup.width) ret = 'right' + suffix
-      if (abstractPos === 'right' && document.documentElement.clientWidth - right < popup.width) ret = 'left' + suffix
-      if (abstractPos === 'top' && top < popup.height) ret = 'bottom' + suffix
-      if (abstractPos === 'bottom' && document.documentElement.clientHeight - bottom < popup.height) ret = 'left' + suffix
-      return ret
-    },
-    mountNode (callback) {
-      if (this.vnode) {
-        callback()
-        return
       }
-      const div = document.createElement('div')
+      if (!this.isNoTitle()) {
-      document.body.appendChild(div)
+        this.$emit('visibleChange', visible)
-      const that = this
+      }
-      const vnode = new Vue({
+    },
-        data () {
+
-          return {
+    getPopupDomNode () {
-            left: 0,
+      return this.$refs.tooltip.getPopupDomNode()
-            top: 0,
+    },
-          }
+
-        },
+    getPlacements () {
-        methods: {
+      const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props
-          hideSelf (e) {
+      return builtinPlacements || getPlacements({
-            if (that.t1) {
+        arrowPointAtCenter,
-              clearTimeout(that.t1)
+        verticalArrowShift: 8,
-              that.t1 = null
+        autoAdjustOverflow,
-            }
-            if (that.mouseLeaveDelay) {
-              that.t2 = window.setTimeout(() => {
-                if (e.relatedTarget === that.$el) {
-                  return
-                }
-                that.visible = false
-              }, +that.mouseLeaveDelay * 1e3)
-            }
-          },
-        },
-        render (h) {
-          return (
-            <transition name={that.transitionName}>
-              <div
-                v-show={that.visible}
-                class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
-                style={{ left: this.left + 'px', top: this.top + 'px' }}
-                onMouseleave={this.hideSelf}
-              >
-                <div class='ant-tooltip-content'>
-                  <div class='ant-tooltip-arrow'/>
-                  <div class='ant-tooltip-inner'>
-                    <span>{that.title}</span>
-                  </div>
-                </div>
-              </div>
-            </transition>
-          )
-        },
-      }).$mount(div)
-      this.$nextTick(() => {
-        this.vnode = vnode
-        callback()
       })
     },
-    onPopupAlign: (placement, domNode, target, align) => {
+
+    isHoverTrigger () {
+      const { trigger } = this.$props
+      if (!trigger || trigger === 'hover') {
+        return true
+      }
+      if (Array.isArray(trigger)) {
+        return trigger.indexOf('hover') >= 0
+      }
+      return false
+    },
+
+    // Fix Tooltip won't hide at disabled button
+    // mouse events don't trigger at disabled button in Chrome
+    // https://github.com/react-component/tooltip/issues/18
+    getDisabledCompatibleChildren (ele) {
+      const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON
+      if (((isAntBtn && ele.componentOptions.propsData.disabled) || (ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) && this.isHoverTrigger()) {
+      // Pick some layout related style properties up to span
+      // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
+        const { picked, omited } = splitObject(
+          getStyle(ele),
+          ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex'],
+        )
+        const spanStyle = {
+          display: 'inline-block', // default inline-block is important
+          ...picked,
+          cursor: 'not-allowed',
+        }
+        const buttonStyle = {
+          ...omited,
+          pointerEvents: 'none',
+        }
+        const spanCls = getClass(ele)
+        const child = cloneElement(ele, {
+          style: buttonStyle,
+          class: null,
+        })
+        return (
+          <span style={spanStyle} class={spanCls}>
+            {child}
+          </span>
+        )
+      }
+      return ele
+    },
+
+    isNoTitle () {
+      const { $slots, title } = this
+      return !$slots.title && !title
+    },
+
+    // 动态设置动画点
+    onPopupAlign (domNode, align) {
+      const placements = this.getPlacements()
+      // 当前返回的位置
+      const placement = Object.keys(placements).filter(
+        key => (
+          placements[key].points[0] === align.points[0] &&
+        placements[key].points[1] === align.points[1]
+        ),
+      )[0]
       if (!placement) {
         return
       }
@@ -135,118 +151,46 @@ export default {
       } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
         transformOrigin.left = `${-align.offset[0]}px`
       }
-      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
+      domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
-    },
-    addEventHandle (old, fn) {
-      if (!old) {
-        return fn
-      } else if (Array.isArray(old)) {
-        return old.indexOf(fn) > -1 ? old : old.concat(fn)
-      } else {
-        return old === fn ? old : [old, fn]
-      }
-    },
-    computeOffset (popup, text, placement, scale) {
-      let { width, height, top, left } = text
-      //  you cant change the properties of DOMRect
-      top += window.scrollY
-      left += window.scrollX
-      // FIXME: we can get the numbers from scale, but that's not what we really want
-      const p = { width: popup.width / scale, height: popup.height / scale }
-      const ret = { left, top }
-
-      if (/top/.test(placement)) ret.top -= p.height
-      if (/bottom/.test(placement)) ret.top += height
-      if (/left/.test(placement)) ret.left -= p.width
-      if (/right/.test(placement)) ret.left += width
-
-      // FIXME: magic number 20 & 14 comes from the offset of triangle
-      if (/Left/.test(placement)) {
-        if (this.arrowPointAtCenter) ret.left += width / 2 - 20
-      } else if (/Right/.test(placement)) {
-        ret.left += (width - p.width)
-        if (this.arrowPointAtCenter) ret.left -= width / 2 - 20
-      } else if (/(top)|(bottom)/.test(placement)) {
-        ret.left += (width - p.width) / 2
-      }
-      if (/Top/.test(placement)) {
-        if (this.arrowPointAtCenter) ret.top += height / 2 - 14
-      } else if (/Bottom/.test(placement)) {
-        ret.top += (height - p.height)
-        if (this.arrowPointAtCenter) ret.top -= height / 2 - 14
-      } else if (/(left)|(right)/.test(placement)) {
-        ret.top += (height - p.height) / 2
-      }
-      return ret
-    },
-    showNode () {
-      this.mountNode(() => {
-        this.visible = true
-        this.$nextTick(() => {
-          const popup = this.vnode.$el.getBoundingClientRect()
-          const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
-          const content = this.$el.getBoundingClientRect()
-          const place = this.autoAdjustOverflow ? this.checkPosition(popup, content, this.placement, scale) : this.placement
-          this.realPlacement = place
-          const { left, top } = this.computeOffset(popup, content, place, scale)
-          this.vnode.left = left
-          this.vnode.top = top
-        })
-        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0, 0] })
-      })
-    },
-    hideNode (e) {
-      if (!this.vnode) return
-      if (e.relatedTarget === this.vnode.$el) {
-        return
-      }
-      this.visible = false
-    },
-    checkShow (e) {
-      if (this.t2) {
-        clearTimeout(this.t2)
-        this.t2 = null
-      }
-      if (this.mouseEnterDelay) {
-        this.t1 = window.setTimeout(() => {
-          this.showNode(e)
-        }, +this.mouseEnterDelay * 1e3)
-      }
-    },
-    checkHide (e) {
-      if (this.t1) {
-        clearTimeout(this.t1)
-        this.t1 = null
-      }
-      if (this.mouseLeaveDelay) {
-        this.t2 = window.setTimeout(() => {
-          this.hideNode(e)
-        }, +this.mouseLeaveDelay * 1e3)
-      }
     },
   },
+
   render (h) {
-    const inner = this.$slots.default[0]
+    const { $props, $data, $slots } = this
-    inner.data = inner.data || {}
+    const { title, prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props
-    inner.data.on = inner.data.on || {}
+    const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0]
-    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.checkShow)
+    let sVisible = $data.sVisible
-    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.checkHide)
+    // Hide tooltip when there is no title
+    if (!hasProp(this, 'visible') && this.isNoTitle()) {
+      sVisible = false
+    }
 
-    return this.$slots.default[0]
+    const child = this.getDisabledCompatibleChildren(isValidElement(children) ? children : <span>{children}</span>)
-  },
+    const childCls = {
-  updated () {
+      [openClassName || `${prefixCls}-open`]: true,
-    if (!this.vnode) return
+    }
-    const popup = this.vnode.$el.getBoundingClientRect()
+    const tooltipProps = {
-    const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
+      props: {
-    const content = this.$el.getBoundingClientRect()
+        ...$props,
-    const { left, top } = this.computeOffset(popup, content, this.realPlacement, scale)
+        getTooltipContainer: getPopupContainer || getTooltipContainer,
-    this.vnode.left = left
+        builtinPlacements: this.getPlacements(),
-    this.vnode.top = top
+        visible: sVisible,
-  },
+      },
-  beforeDestroy () {
+      ref: 'tooltip',
-    if (!this.vnode) return
+      on: {
-    this.vnode.$el.remove()
+        visibleChange: this.onVisibleChange,
-    this.vnode.$destroy()
+        popupAlign: this.onPopupAlign,
+      },
+    }
+    return (
+      <RcTooltip {...tooltipProps}>
+        <template slot='overlay'>
+          {typeof title === 'function' ? title(h) : title}
+          {$slots.title}
+        </template>
+        {sVisible ? cloneElement(child, { class: childCls }) : child}
+      </RcTooltip>
+    )
   },
 }
 </script>

components/trigger/Popup.vue

@@ -56,11 +56,9 @@ export default {
     onAlign (popupDomNode, align) {
       const props = this.$props
       const currentAlignClassName = props.getClassNameFromAlign(align)
-      // FIX: https://github.com/react-component/trigger/issues/56
-      // FIX: https://github.com/react-component/tooltip/issues/79
       if (this.currentAlignClassName !== currentAlignClassName) {
+        popupDomNode.className = popupDomNode.className.replace(this.currentAlignClassName, currentAlignClassName)
         this.currentAlignClassName = currentAlignClassName
-        popupDomNode.className = this.getClassName(currentAlignClassName)
       }
       this.$emit('align', popupDomNode, align)
     },
@@ -101,14 +99,6 @@ export default {
     onMouseLeave (e) {
       this.$emit('mouseleave', e)
     },
-    beforeEnter (el) {
-      try {
-        // this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
-      } catch (error) {
-
-      }
-      this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
-    },
     afterLeave (el) {
       if (this.destroyPopupOnHide) {
         this.destroyPopup = true
@@ -117,8 +107,8 @@ export default {
     getPopupElement () {
       const { $props: props, onMouseEnter, onMouseLeave, $slots } = this
       const { align, visible, prefixCls, animation } = props
-      const className = this.getClassName(this.currentAlignClassName ||
+      this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
-      props.getClassNameFromAlign(align))
+      const className = this.getClassName(this.currentAlignClassName)
       // const hiddenClassName = `${prefixCls}-hidden`
       if (!visible) {
         this.currentAlignClassName = null
@@ -144,7 +134,6 @@ export default {
       }
       return (<transition
         {...transitionProps}
-        onBeforeEnter={this.beforeEnter}
         onAfterLeave={this.afterLeave}
       >
         <Align

components/trigger/index.md

@@ -139,14 +139,14 @@
           <td>builtin placement align map. used by placement prop</td>
         </tr>
         <tr>
-          <td>popupVisibleChange</td>
+          <td>onPopupVisibleChange</td>
-          <td>$emit(visible)</td>
+          <td>function</td>
           <td></td>
           <td>call when popup visible is changed</td>
         </tr>
         <tr>
-          <td>popupAlign</td>
+          <td>onPopupAlign</td>
-          <td>$emit(popupDomNode, align)</td>
+          <td>function</td>
           <td></td>
           <td>callback when popup node is aligned</td>
         </tr>

components/trigger/index.vue

@@ -5,7 +5,7 @@ import hasProp from '../_util/hasProp'
 import addEventListener from '../_util/Dom/addEventListener'
 import warning from '../_util/warning'
 import Popup from './Popup'
-import { getAlignFromPlacement, getPopupClassNameFromAlign } from './utils'
+import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
 import StateMixin from '../_util/StateMixin'
 import { cloneElement, cloneVNode } from '../_util/vnode'
 
@@ -27,8 +27,8 @@ export default {
     showAction: PropTypes.any.def([]),
     hideAction: PropTypes.any.def([]),
     getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
-    // onPopupVisibleChange: PropTypes.func,
+    // onPopupVisibleChange: PropTypes.func.def(noop),
-    // afterPopupVisibleChange: PropTypes.func,
+    afterPopupVisibleChange: PropTypes.func.def(noop),
     popup: PropTypes.any,
     popupStyle: PropTypes.object.def({}),
     prefixCls: PropTypes.string.def('rc-trigger-popup'),
@@ -51,7 +51,7 @@ export default {
     destroyPopupOnHide: PropTypes.bool.def(false),
     mask: PropTypes.bool.def(false),
     maskClosable: PropTypes.bool.def(true),
-    // onPopupAlign: PropTypes.func,
+    // onPopupAlign: PropTypes.func.def(noop),
     popupAlign: PropTypes.object.def({}),
     popupVisible: PropTypes.bool,
     defaultPopupVisible: PropTypes.bool.def(false),
@@ -96,7 +96,7 @@ export default {
     },
     sPopupVisible (val) {
       this.$nextTick(() => {
-        this.$emit('afterPopupVisibleChange', val)
+        this.afterPopupVisibleChange(val)
       })
     },
   },
@@ -261,7 +261,7 @@ export default {
       return this.$el.children ? this.$el.children[0] : this.$el
     },
 
-    getPopupClassFromAlign (align) {
+    handleGetPopupClassFromAlign (align) {
       const className = []
       const props = this.$props
       const { popupPlacement, builtinPlacements, prefixCls } = props
@@ -285,7 +285,7 @@ export default {
     onPopupAlign () {
       this.$emit('popupAlign', ...arguments)
     },
-    getComponent () {
+    getComponent (h) {
       const mouseProps = {}
       if (this.isMouseEnterToShow()) {
         mouseProps.mouseenter = this.onPopupMouseenter
@@ -295,7 +295,7 @@ export default {
       }
       const { prefixCls, destroyPopupOnHide, sPopupVisible,
         popupStyle, popupClassName, action, onPopupAlign,
-        popupAnimation, getPopupClassFromAlign, getRootDomNode,
+        popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
         mask, zIndex, popupTransitionName, getPopupAlign,
         maskAnimation, maskTransitionName, popup, $slots, getContainer } = this
       const popupProps = {
@@ -306,7 +306,7 @@ export default {
           action,
           align: getPopupAlign(),
           animation: popupAnimation,
-          getClassNameFromAlign: getPopupClassFromAlign,
+          getClassNameFromAlign: handleGetPopupClassFromAlign,
           getRootDomNode,
           mask,
           zIndex,
@@ -328,7 +328,7 @@ export default {
           {...popupProps}
           ref='popup'
         >
-          {typeof popup === 'function' ? popup() : popup}
+          {typeof popup === 'function' ? popup(h) : popup}
           {popup === undefined ? $slots.popup : null}
         </Popup>
       )
@@ -472,7 +472,7 @@ export default {
       this.setPopupVisible(false)
     },
   },
-  render () {
+  render (h) {
     const children = this.$slots.default
     if (children.length > 1) {
       warning(false, 'Trigger $slots.default.length > 1, just support only one default', true)
@@ -521,7 +521,7 @@ export default {
     const trigger = cloneElement(cloneVNode(child), newChildProps)
     const { sPopupVisible, forceRender } = this
     if (sPopupVisible || forceRender || this._component) {
-      this._component = this.getComponent()
+      this._component = this.getComponent(h)
     } else {
       this._component = null
     }

components/trigger/utils.js

@@ -21,7 +21,5 @@ export function getPopupClassNameFromAlign (builtinPlacements, prefixCls, align)
   }
   return ''
 }
-
+export function noop () {
-export function saveRef (name, component) {
-  this[name] = component
 }

examples/index.less

@@ -1,3 +1,3 @@
-.icon-test{
+#app {
-  font-size: 35px;
+  padding: 50px;
 }

examples/md.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-html="marked($slots.default[0].text.trim() || '')" />
+  <div style="padding: 10px 0;" v-html="marked($slots.default[0].text.trim() || '')" />
 </template>
 <script>
 import marked from 'marked'
@@ -16,7 +16,6 @@ marked.setOptions({
 export default {
   name: 'md',
   data () {
-    console.log(this.$slots.default)
     return {
       marked,
     }