feat: #235 v5 Tooltip component

src/components/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ToolTip > should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="test-static-id"
+    class="mocked-styled-0 el-tool-tip-container"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

src/components/tooltip/__tests__/tooltip.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { ToolTip } from '../index'
+
+describe('ToolTip', () => {
+  test('should match snapshot', () => {
+    const { asFragment } = render(<ToolTip tip="Tooltip Text">Test</ToolTip>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './styles'
+export * from './tooltip'

src/components/tooltip/styles.ts

@@ -0,0 +1,132 @@
+import { styled } from '@linaria/react'
+
+export const ElToolTipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  overflow: visible;
+`
+
+export const ElToolTipChild = styled.div`
+  width: max-content;
+  background: var(--fill-default-darkest, #222b33);
+  color: var(--text-white);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--corner-default);
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: 400; // To do : Need to replace with variable
+  line-height: var(--line-height-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  position: absolute;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  white-space: normal;
+  word-wrap: break-word;
+  z-index: 99999; // Adding additional CSS to position tooltip on top of everything
+
+  // To do (In Future): Tooltip Positioning to be replaced with css anchor positioning feature
+  // Currently not supported by wider browser group
+  // See: https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor#browser_compatibility
+
+  /* Top Position */
+  &[data-position='top'] {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--spacing-1);
+  }
+
+  /* Top Start Position */
+  &[data-position='topStart'] {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--spacing-1);
+  }
+
+  /* Top End Position */
+  &[data-position='topEnd'] {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--spacing-1);
+  }
+
+  /* Bottom Position */
+  &[data-position='bottom'] {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--spacing-1);
+  }
+
+  /* Bottom Start Position */
+  &[data-position='bottomStart'] {
+    top: 100%;
+    left: 0;
+    margin-top: var(--spacing-1);
+  }
+
+  /* Bottom End Position */
+  &[data-position='bottomEnd'] {
+    top: 100%;
+    right: 0;
+    margin-top: var(--spacing-1);
+  }
+
+  /* Right Position */
+  &[data-position='right'] {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--spacing-1);
+  }
+
+  /* Right Start Position */
+  &[data-position='rightStart'] {
+    left: 100%;
+    top: 0;
+    margin-left: var(--spacing-1);
+  }
+
+  /* Right End Position */
+  &[data-position='rightEnd'] {
+    left: 100%;
+    bottom: 0;
+    margin-left: var(--spacing-1);
+  }
+
+  /* Left Position */
+  &[data-position='left'] {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--spacing-1);
+  }
+
+  /* Left Start Position */
+  &[data-position='leftStart'] {
+    right: 100%;
+    top: 0;
+    margin-right: var(--spacing-1);
+  }
+
+  /* Left End Position */
+  &[data-position='leftEnd'] {
+    right: 100%;
+    bottom: 0;
+    margin-right: var(--spacing-1);
+  }
+`
+
+export const ElToolTipLabel = styled.span`
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: 600; // To do : Need to replace with variable
+  line-height: var(--line-height-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+`

src/components/tooltip/tooltip.mdx

@@ -0,0 +1,11 @@
+import { Meta, Canvas, Controls, Description } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as ToolTipStories from './tooltip.stories'
+
+<Meta of={ToolTipStories} />
+
+# Tool Tip
+
+<Controls />
+
+<Canvas of={ToolTipStories.BasicUsage} />

src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/react'
+import { ToolTip } from './tooltip'
+import { Button } from '../button'
+
+const meta: Meta<typeof ToolTip> = {
+  title: 'Components/ToolTip',
+  component: ToolTip,
+  argTypes: {
+    tip: {
+      control: 'text',
+      description: 'Defines the tip of the tooltip.',
+    },
+    label: {
+      control: 'text',
+      description: 'Defines the label of the tooltip',
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  // This is to style the story, as the story parent container has overflow hidden.
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '20vh',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+export const BasicUsage = {
+  args: {
+    tip: 'Tooltip text',
+    children: <Button variant="primary">Hover me</Button>,
+  },
+}

src/components/tooltip/tooltip.tsx

@@ -0,0 +1,66 @@
+import React, { FC, HTMLAttributes, useState, ReactNode } from 'react'
+import { ElToolTipChild, ElToolTipContainer, ElToolTipLabel } from './styles'
+import { useId } from '#src/storybook/random-id'
+
+export interface ToolTipProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  label?: string
+  tip: string
+  maxWidth?: string
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'right'
+    | 'left'
+    | 'topStart'
+    | 'topEnd'
+    | 'bottomStart'
+    | 'bottomEnd'
+    | 'rightStart'
+    | 'rightEnd'
+    | 'leftStart'
+    | 'leftEnd'
+}
+
+export interface ToolTipChildProps extends HTMLAttributes<HTMLDivElement> {
+  position: ToolTipProps['position']
+  maxWidth?: string
+}
+
+export const ToolTip: FC<ToolTipProps> = ({ children, label, tip, maxWidth = '400px', position = 'top' }) => {
+  const [visible, setVisible] = useState(false)
+  const tooltipId = useId()
+
+  return (
+    <ElToolTipContainer
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      onFocus={() => setVisible(true)}
+      onBlur={() => setVisible(false)}
+      aria-describedby={tooltipId}
+    >
+      {children}
+      {visible && (
+        <ToolTipChild id={tooltipId} position={position} maxWidth={maxWidth}>
+          {label && <ElToolTipLabel>{label}: </ElToolTipLabel>}
+          {tip}
+        </ToolTipChild>
+      )}
+    </ElToolTipContainer>
+  )
+}
+
+export const ToolTipChild: FC<ToolTipChildProps> = ({ children, position, maxWidth, id }) => {
+  return (
+    <ElToolTipChild
+      id={id} // To support a11y for screen reader to pass to aria-describedby
+      role="tooltip"
+      data-position={position}
+      style={{ maxWidth: maxWidth }}
+      aria-hidden={!id} // hidden if no id is present
+      aria-live="assertive" // Announce content dynamically
+    >
+      {children}
+    </ElToolTipChild>
+  )
+}

src/index.ts

@@ -57,6 +57,7 @@ export * from './components/menu'
 export * from './components/dialog'
 export * from './components/avatar'
 export * from './components/skeleton'
+export * from './components/tooltip'
 
 export * from './hooks/use-portal'
 export * from './hooks/use-snack'