update tooltip component based on new DS

src/@chakra-ui/gatsby-plugin/components/Tooltip.ts

@@ -0,0 +1,31 @@
+import {
+  cssVar,
+  defineStyle,
+  defineStyleConfig,
+  getToken,
+} from "@chakra-ui/react"
+
+const $arrowBg = cssVar("popper-arrow-bg")
+
+const baseStyle = defineStyle((props) => {
+  const tableBoxShadow = getToken("colors", "tableBoxShadow")(props.theme)
+
+  return {
+    w: 44,
+    maxW: 48,
+    p: 2,
+    bg: "background.highlight",
+    fontSize: "sm",
+    fontWeight: "normal",
+    borderRadius: "base",
+    cursor: "default",
+    textAlign: "center",
+    zIndex: "docked",
+    boxShadow: tableBoxShadow,
+    [$arrowBg.variable]: "colors.background.highlight",
+  }
+})
+
+export const Tooltip = defineStyleConfig({
+  baseStyle,
+})

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -13,6 +13,7 @@ import { Radio } from "./Radio"
 import { Select } from "./Select"
 import { Switch } from "./Switch"
 import { Input } from "./Input"
+import { Tooltip } from "./Tooltip"
 import {
   accordionDefaultTheme,
   breadcrumbDefaultTheme,
@@ -54,4 +55,5 @@ export default {
   Table,
   Tabs,
   Tag,
+  Tooltip,
 }

src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Icon } from "@chakra-ui/react"
+import TooltipComponent from "."
+
+type TooltipType = typeof TooltipComponent
+
+const meta: Meta<TooltipType> = {
+  title: "Molecules / Overlay Content / Tooltip",
+  component: TooltipComponent,
+}
+
+export default meta
+
+type Story = StoryObj<TooltipType>
+
+export const Tooltip: Story = {
+  render: () => (
+    <TooltipComponent content="Text here">
+      <Icon fill="'text" name="info" />
+    </TooltipComponent>
+  ),
+}

src/components/Tooltip/index.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from "react"
+import { Box, Center, Tooltip as ChakraTooltip } from "@chakra-ui/react"
+import * as utils from "../../utils/isMobile"
+
+export interface IProps {
+  content: ReactNode
+  children?: React.ReactNode
+}
+
+const Tooltip: React.FC<IProps> = ({ content, children }) => {
+  const isMobile = utils.isMobile()
+
+  return (
+    <Box title="More Info!" display="inline-block" ml={2}>
+      <ChakraTooltip label={content} placement="top" hasArrow>
+        <Center
+          as="span"
+          tabIndex={0}
+          p={1}
+          cursor="pointer"
+          color="body.base"
+          _hover={{
+            color: isMobile ? "primary.hover" : "primary.base",
+          }}
+          _focusVisible={{
+            outline: "none",
+            color: "primary.base",
+            border: "2px",
+            borderColor: "primary.hover",
+            borderRadius: "full",
+          }}
+          sx={{
+            svg: {
+              w: 3,
+              h: 3,
+              ml: 0,
+              color: "inherit",
+            },
+          }}
+        >
+          {children}
+        </Center>
+      </ChakraTooltip>
+    </Box>
+  )
+}
+
+export default Tooltip