feat: add tooltip component

src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,89 @@
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import styled from 'styled-components'
+
+import { Icon } from '../Icon'
+import { Tooltip } from './Tooltip'
+
+storiesOf('Tooltip', module).add('all', () => (
+  <List>
+    <li>
+      <Tooltip
+        message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
+        balloonType="dark"
+      >
+        Default: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima
+        Trinidad Ruiz Picasso
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip message="invisible message" ellipsisOnly={true}>
+        Ellipsis Only
+      </Tooltip>
+      <Tooltip
+        message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
+        ellipsisOnly={true}
+      >
+        <Text>
+          Ellipsis Only: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
+          Santísima Trinidad Ruiz Picasso
+        </Text>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
+        multiLine={true}
+      >
+        MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
+        Santísima Trinidad Ruiz Picasso
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip
+        message={
+          <>
+            MultiLineMessage
+            <br />
+            MultiLine 1<br />
+            MultiLine 2<br />
+            MultiLine 3<br />
+            ...
+          </>
+        }
+        multiLine={true}
+      >
+        <Text>
+          MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
+          Santísima Trinidad Ruiz Picasso
+        </Text>
+      </Tooltip>
+    </li>
+    <li>
+      <Tooltip message="Icon Message" triggerType="icon">
+        <Icon name="fa-question-circle" />
+      </Tooltip>
+    </li>
+  </List>
+))
+
+const List = styled.ul`
+  width: 200px;
+  margin-top: 100px;
+  padding: 0 24px;
+  list-style: none;
+
+  & > li {
+    &:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+`
+
+const Text = styled.span`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import styled, { css } from 'styled-components'
+import { LightBalloon, DarkBalloon } from '../Balloon'
+import { useTheme, Theme } from '../../hooks/useTheme'
+
+interface Prop {
+  message: React.ReactNode
+  children: React.ReactNode
+  triggerType?: 'icon' | 'text'
+  multiLine?: boolean
+  ellipsisOnly?: boolean
+  balloonType?: 'light' | 'dark'
+}
+
+export const Tooltip: React.FC<Prop> = ({
+  message,
+  children,
+  triggerType,
+  multiLine,
+  ellipsisOnly = false,
+  balloonType = 'light',
+}) => {
+  const theme = useTheme()
+  const [isVisible, setIsVisible] = useState(false)
+
+  const className = [triggerType === 'icon' ? 'icon-tooltip' : '', multiLine ? 'multi-line' : '']
+    .filter(c => !!c)
+    .join(' ')
+  const ref = React.createRef<HTMLSpanElement>()
+
+  const overAction = () => {
+    if (!ellipsisOnly) {
+      setIsVisible(true)
+
+      return
+    }
+
+    const wrapper = ref.current!
+    const parentWidth = parseInt(
+      window.getComputedStyle(wrapper.parentNode! as HTMLElement, null).width.match(/\d+/)![0],
+      10,
+    )
+
+    if (parentWidth <= wrapper.clientWidth) {
+      setIsVisible(true)
+    }
+  }
+  const outAction = () => {
+    setIsVisible(false)
+  }
+  const StyledBalloon = balloonType === 'light' ? StyledLightBalloon : StyledDarkBallon
+
+  return (
+    <Wrapper
+      ref={ref}
+      onMouseOver={overAction}
+      onTouchStart={overAction}
+      onMouseOut={outAction}
+      onTouchEnd={outAction}
+    >
+      {isVisible && (
+        <StyledBalloon horizontal="left" vertical="bottom" className={className}>
+          <StyledBalloonText themes={theme}>{message}</StyledBalloonText>
+        </StyledBalloon>
+      )}
+      {children}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.span`
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+`
+
+const StyledLightBalloon = styled(LightBalloon)`
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 10px);
+
+  &.multi-line {
+    width: 100%;
+    white-space: normal;
+  }
+
+  &.icon-tooltip {
+    left: calc(-100% - 5px);
+  }
+`
+const StyledDarkBallon = StyledLightBalloon.withComponent(DarkBalloon)
+
+const StyledBalloonText = styled.p<{ themes: Theme }>`
+  margin: 0;
+  ${props => {
+    const { themes } = props
+    const { size } = themes
+
+    return css`
+      padding: ${size.pxToRem(size.space.XXS)} ${size.pxToRem(size.space.XS)};
+    `
+  }}
+`

src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip'