[WIP]feat/tooltip

- Code done
- Awaiting test cases

packages/element-plus/index.ts

@@ -25,7 +25,7 @@ import ElSteps from '@element-plus/steps'
 import ElCollapse from '@element-plus/collapse'
 import ElPopper from '@element-plus/popper'
 import ElTabs from '@element-plus/tabs'
-
+import ElTooltip from '@element-plus/tooltip'
 
 export {
   ElAlert,
@@ -53,6 +53,7 @@ export {
   ElRadio,
   ElCollapse,
   ElTabs,
+  ElTooltip,
 }
 
 export default function install(app: App): void {
@@ -82,4 +83,5 @@ export default function install(app: App): void {
   ElCollapse(app)
   ElPopper(app)
   ElTabs(app)
+  ElTooltip(app)
 }

packages/popper/src/index.vue

@@ -22,6 +22,7 @@ import { createPopper } from '@popperjs/core'
 import { generateId } from '@element-plus/utils/util'
 import { on, off } from '@element-plus/utils/dom'
 import throwError from '@element-plus/utils/error'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 
 import useModifier from './useModifier'
 
@@ -73,6 +74,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    class: {
+      type: String,
+      default: '',
+    },
     closeDelay: {
       type: Number,
       default: 200,
@@ -153,12 +158,18 @@ export default defineComponent({
       type: String,
       default: '0',
     },
+    modelValue: {
+      type: Boolean,
+      default: undefined,
+      validator: val => typeof val === 'boolean',
+    },
     value: {
       type: Boolean,
       default: false,
     },
   },
-  setup(props, { slots }) {
+  emits: [UPDATE_MODEL_EVENT],
+  setup(props, { slots, emit }) {
     const popperRef = ref<RefElement>(null)
     const arrowRef = ref<RefElement>(null)
     const trigger = ref<RefElement>(null)
@@ -294,6 +305,7 @@ export default defineComponent({
           })
       _trigger.setAttribute('aria-describedby', popperId.value)
       _trigger.setAttribute('tabindex', props.tabIndex)
+      _trigger.classList.add(props.class)
       on(_trigger, 'mouseenter', _show)
       on(_trigger, 'mouseleave', _hide)
       on(_trigger, 'focus', handleFocus)
@@ -302,12 +314,15 @@ export default defineComponent({
 
     watch(
       () => visible.value,
-      () => {
+      val => {
         if (popperInstance.value) {
           popperInstance.value.update()
         } else {
           initializePopper()
         }
+        if (props.manualMode) {
+          emit(UPDATE_MODEL_EVENT, val)
+        }
       },
     )
 

packages/tooltip/__tests__/tooltip.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import Tooltip from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Tooltip.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(Tooltip, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+  })
+})

packages/tooltip/doc/basic.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="box">
+    <div class="top">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Top Left prompts info"
+        placement="top-start"
+      >
+        <el-button>top-start</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Top Center prompts info"
+        placement="top"
+      >
+        <el-button>top</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Top Right prompts info"
+        placement="top-end"
+      >
+        <el-button>top-end</el-button>
+      </el-tooltip>
+    </div>
+    <div class="left">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Left Top prompts info"
+        placement="left-start"
+      >
+        <el-button>left-start</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Left Center prompts info"
+        placement="left"
+      >
+        <el-button>left</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Left Bottom prompts info"
+        placement="left-end"
+      >
+        <el-button>left-end</el-button>
+      </el-tooltip>
+    </div>
+
+    <div class="right">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Right Top prompts info"
+        placement="right-start"
+      >
+        <el-button>right-start</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Right Center prompts info"
+        placement="right"
+      >
+        <el-button>right</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Right Bottom prompts info"
+        placement="right-end"
+      >
+        <el-button>right-end</el-button>
+      </el-tooltip>
+    </div>
+    <div class="bottom">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Bottom Left prompts info"
+        placement="bottom-start"
+      >
+        <el-button>bottom-start</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Bottom Center prompts info"
+        placement="bottom"
+      >
+        <el-button>bottom</el-button>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="Bottom Right prompts info"
+        placement="bottom-end"
+      >
+        <el-button>bottom-end</el-button>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<style>
+.box {
+  width: 400px;
+  padding-left: 25%;
+  padding-top: 200px;
+}
+.box .top {
+  text-align: center;
+}
+
+.box .left {
+  float: left;
+  width: 110px;
+}
+
+.box .right {
+  float: right;
+  width: 110px;
+}
+.box .bottom {
+  clear: both;
+  text-align: center;
+}
+.box .item {
+  margin: 4px;
+}
+.box .left .el-tooltip__popper,
+.box .right .el-tooltip__popper {
+  padding: 8px 10px;
+}
+.box .el-button {
+  width: 110px;
+}
+</style>

packages/tooltip/doc/index.stories.ts

@@ -0,0 +1,5 @@
+export default {
+  title: 'Tooltip',
+}
+
+export { default as Basic } from './basic.vue'

packages/tooltip/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Tooltip from './src/index.vue'
+export default (app: App): void => {
+  app.component(Tooltip.name, Tooltip)
+}

packages/tooltip/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/tooltip",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.6"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}