From 720ec23f61313d9c674324eb8222f079a653ee87 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@users.noreply.github.com>
Date: Thu, 24 Sep 2020 23:57:27 -0700
Subject: [PATCH] feat #93 - Tooltip component

Closes #93
---
 src/__snapshots__/storybook.test.ts.snap      |  25 +-
 src/components/Tooltip/Tooltip.stories.tsx    |  48 ++
 src/components/Tooltip/Tooltip.test.tsx       |  40 ++
 src/components/Tooltip/index.tsx              |  41 ++
 .../assets/styles/antdAnimations.css          | 634 ++++++++++++++++++
 src/components/index.ts                       |   1 +
 6 files changed, 785 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Tooltip/Tooltip.stories.tsx
 create mode 100644 src/components/Tooltip/Tooltip.test.tsx
 create mode 100644 src/components/Tooltip/index.tsx

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 7aed076c..6ebd9c63 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -515,7 +515,6 @@ exports[`Storyshots Select Default 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -607,7 +606,6 @@ exports[`Storyshots Select Full Width 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -704,7 +702,6 @@ exports[`Storyshots Select Icon 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -810,7 +807,6 @@ exports[`Storyshots Select Search 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -1050,6 +1046,27 @@ exports[`Storyshots Toggle Small 1`] = `
 </button>
 `;
 
+exports[`Storyshots Tooltip Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": 75,
+    }
+  }
+>
+  <span
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <img
+      alt="dassana"
+      height={32}
+      src="dassana-blue.png"
+    />
+  </span>
+</div>
+`;
+
 exports[`Storyshots Tree Default 1`] = `
 <ForwardRef
   blockNode={true}
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 00000000..952382cd
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,48 @@
+import Icon from '../Icon'
+import React from 'react'
+import { TooltipPlacement } from 'antd/lib/tooltip'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Tooltip, { TooltipProps } from './index'
+
+const placementOptions: TooltipPlacement[] = [
+	'bottom',
+	'bottomLeft',
+	'bottomRight',
+	'left',
+	'leftBottom',
+	'leftTop',
+	'right',
+	'rightBottom',
+	'rightTop',
+	'top',
+	'topLeft',
+	'topRight'
+]
+
+export default {
+	argTypes: {
+		children: { control: { disable: true } },
+		placement: {
+			control: {
+				options: placementOptions,
+				type: 'select'
+			},
+			defaultValue: 'right'
+		}
+	},
+	component: Tooltip,
+	title: 'Tooltip'
+} as Meta
+
+const Template: Story<TooltipProps> = args => (
+	<div style={{ padding: 75 }}>
+		<Tooltip {...args}>
+			<Icon iconKey='dassana' />
+		</Tooltip>
+	</div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+	title: 'Dassana'
+}
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 00000000..809a510a
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,40 @@
+import { Tooltip as AntDTooltip } from 'antd'
+import React from 'react'
+import { shallow, ShallowWrapper } from 'enzyme'
+import Tooltip, { TooltipProps } from './index'
+
+let wrapper: ShallowWrapper
+
+const mockTitle = 'foo'
+
+const getWrapper = (
+	additionalProps?: Omit<TooltipProps, 'children' | 'title'>
+): ShallowWrapper =>
+	shallow(
+		<Tooltip title={mockTitle} {...additionalProps}>
+			<div>Hello World</div>
+		</Tooltip>
+	)
+
+beforeEach(() => {
+	wrapper = getWrapper()
+})
+
+describe('Tooltip', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('correctly passes the title prop', () => {
+		expect(wrapper.find(AntDTooltip).props().title).toEqual(mockTitle)
+	})
+
+	it('correctly passes the placement prop if one is provided', () => {
+		wrapper = getWrapper({ placement: 'top' })
+		expect(wrapper.find(AntDTooltip).props().placement).toEqual('top')
+	})
+
+	it('has a default placement of right', () => {
+		expect(wrapper.find(AntDTooltip).props().placement).toBe('right')
+	})
+})
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
new file mode 100644
index 00000000..d1c00cab
--- /dev/null
+++ b/src/components/Tooltip/index.tsx
@@ -0,0 +1,41 @@
+import '../assets/styles/antdAnimations.css'
+import 'antd/lib/tooltip/style/index.css'
+// import 'antd/dist/antd.css'
+import { Tooltip as AntDTooltip } from 'antd'
+import { TooltipPlacement } from 'antd/es/tooltip'
+import React, { FC, ReactNode } from 'react'
+
+export type TooltipTitle = string | ReactNode
+
+export interface TooltipProps {
+	/**
+	 * Element tooltip should be anchored to
+	 */
+	children: ReactNode
+	/**
+	 * Position of tooltip relative to the target
+	 */
+	placement?: TooltipPlacement
+	/**
+	 * Text shown in the tooltip
+	 */
+	title: TooltipTitle
+}
+
+const Tooltip: FC<TooltipProps> = ({
+	children,
+	placement = 'right',
+	title
+}: TooltipProps) => {
+	return (
+		<AntDTooltip
+			overlayStyle={{ borderRadius: 4 }}
+			placement={placement}
+			title={title}
+		>
+			<span>{children}</span>
+		</AntDTooltip>
+	)
+}
+
+export default Tooltip
diff --git a/src/components/assets/styles/antdAnimations.css b/src/components/assets/styles/antdAnimations.css
index 3aa51dce..db075de5 100644
--- a/src/components/assets/styles/antdAnimations.css
+++ b/src/components/assets/styles/antdAnimations.css
@@ -420,3 +420,637 @@
 		opacity: 0;
 	}
 }
+
+.zoom-enter,
+.zoom-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+	-webkit-animation-name: antZoomIn;
+	animation-name: antZoomIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-leave.zoom-leave-active {
+	-webkit-animation-name: antZoomOut;
+	animation-name: antZoomOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-enter,
+.zoom-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-enter,
+.zoom-big-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-big-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-big-enter.zoom-big-enter-active,
+.zoom-big-appear.zoom-big-appear-active {
+	-webkit-animation-name: antZoomBigIn;
+	animation-name: antZoomBigIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-big-leave.zoom-big-leave-active {
+	-webkit-animation-name: antZoomBigOut;
+	animation-name: antZoomBigOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-big-enter,
+.zoom-big-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+	-webkit-animation-duration: 0.1s;
+	animation-duration: 0.1s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-big-fast-leave {
+	-webkit-animation-duration: 0.1s;
+	animation-duration: 0.1s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-big-fast-enter.zoom-big-fast-enter-active,
+.zoom-big-fast-appear.zoom-big-fast-appear-active {
+	-webkit-animation-name: antZoomBigIn;
+	animation-name: antZoomBigIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-big-fast-leave.zoom-big-fast-leave-active {
+	-webkit-animation-name: antZoomBigOut;
+	animation-name: antZoomBigOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-fast-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-up-enter,
+.zoom-up-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-up-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-up-enter.zoom-up-enter-active,
+.zoom-up-appear.zoom-up-appear-active {
+	-webkit-animation-name: antZoomUpIn;
+	animation-name: antZoomUpIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-up-leave.zoom-up-leave-active {
+	-webkit-animation-name: antZoomUpOut;
+	animation-name: antZoomUpOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-up-enter,
+.zoom-up-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-up-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-down-enter,
+.zoom-down-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-down-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-down-enter.zoom-down-enter-active,
+.zoom-down-appear.zoom-down-appear-active {
+	-webkit-animation-name: antZoomDownIn;
+	animation-name: antZoomDownIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-down-leave.zoom-down-leave-active {
+	-webkit-animation-name: antZoomDownOut;
+	animation-name: antZoomDownOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-down-enter,
+.zoom-down-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-down-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-left-enter,
+.zoom-left-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-left-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-left-enter.zoom-left-enter-active,
+.zoom-left-appear.zoom-left-appear-active {
+	-webkit-animation-name: antZoomLeftIn;
+	animation-name: antZoomLeftIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-left-leave.zoom-left-leave-active {
+	-webkit-animation-name: antZoomLeftOut;
+	animation-name: antZoomLeftOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-left-enter,
+.zoom-left-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-left-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-right-enter,
+.zoom-right-appear {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-right-leave {
+	-webkit-animation-duration: 0.2s;
+	animation-duration: 0.2s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+	-webkit-animation-play-state: paused;
+	animation-play-state: paused;
+}
+.zoom-right-enter.zoom-right-enter-active,
+.zoom-right-appear.zoom-right-appear-active {
+	-webkit-animation-name: antZoomRightIn;
+	animation-name: antZoomRightIn;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+}
+.zoom-right-leave.zoom-right-leave-active {
+	-webkit-animation-name: antZoomRightOut;
+	animation-name: antZoomRightOut;
+	-webkit-animation-play-state: running;
+	animation-play-state: running;
+	pointer-events: none;
+}
+.zoom-right-enter,
+.zoom-right-appear {
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+	-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-right-leave {
+	-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+	animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+@-webkit-keyframes antZoomIn {
+	0% {
+		-webkit-transform: scale(0.2);
+		transform: scale(0.2);
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+@keyframes antZoomIn {
+	0% {
+		-webkit-transform: scale(0.2);
+		transform: scale(0.2);
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+@-webkit-keyframes antZoomOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	100% {
+		-webkit-transform: scale(0.2);
+		transform: scale(0.2);
+		opacity: 0;
+	}
+}
+@keyframes antZoomOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	100% {
+		-webkit-transform: scale(0.2);
+		transform: scale(0.2);
+		opacity: 0;
+	}
+}
+@-webkit-keyframes antZoomBigIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+@keyframes antZoomBigIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+@-webkit-keyframes antZoomBigOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		opacity: 0;
+	}
+}
+@keyframes antZoomBigOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		opacity: 0;
+	}
+}
+@-webkit-keyframes antZoomUpIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+	}
+}
+@keyframes antZoomUpIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+	}
+}
+@-webkit-keyframes antZoomUpOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+		opacity: 0;
+	}
+}
+@keyframes antZoomUpOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 0%;
+		transform-origin: 50% 0%;
+		opacity: 0;
+	}
+}
+@-webkit-keyframes antZoomLeftIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+	}
+}
+@keyframes antZoomLeftIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+	}
+}
+@-webkit-keyframes antZoomLeftOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+		opacity: 0;
+	}
+}
+@keyframes antZoomLeftOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+		opacity: 0;
+	}
+}
+@-webkit-keyframes antZoomRightIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+	}
+}
+@keyframes antZoomRightIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+	}
+}
+@-webkit-keyframes antZoomRightOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+		opacity: 0;
+	}
+}
+@keyframes antZoomRightOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 100% 50%;
+		transform-origin: 100% 50%;
+		opacity: 0;
+	}
+}
+@-webkit-keyframes antZoomDownIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+	}
+}
+@keyframes antZoomDownIn {
+	0% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		opacity: 0;
+	}
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+	}
+}
+@-webkit-keyframes antZoomDownOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		opacity: 0;
+	}
+}
+@keyframes antZoomDownOut {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+	}
+	100% {
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		opacity: 0;
+	}
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 2361ff24..5ce299e8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,5 +10,6 @@ export { default as Skeleton } from './Skeleton'
 export { default as Table } from './Table'
 export { default as Tag } from './Tag'
 export { default as Toggle } from './Toggle'
+export { default as Tooltip } from './Tooltip'
 export { default as Tree } from './Tree'
 export * from './types'