From f8f67b741e9487845aa50c2adaa8ec2f526bd6d0 Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Fri, 18 Aug 2023 17:52:46 +0800
Subject: [PATCH 1/2] add colors to tooltip background

---
 .../components/molecules/Tooltip/Tooltip.tsx  | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
index d7daca0d..9bdcfb96 100644
--- a/components/src/components/molecules/Tooltip/Tooltip.tsx
+++ b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -8,8 +8,9 @@ import {
   PopoverProps,
 } from '@/src/components/atoms/DynamicPopover'
 import { mq } from '@/src/utils/responsiveHelpers'
+import { Colors } from '@/src/tokens'
 
-const injectedCss = {
+const injectedCss = (color: string) => ({
   top: `
     &:after {
       display: initial;
@@ -22,7 +23,7 @@ const injectedCss = {
       width: 0;
       height: 0;
       border: 10px solid transparent;
-      border-top-color: white;
+      border-top-color: ${color};
     }
   `,
   bottom: `
@@ -37,7 +38,7 @@ const injectedCss = {
       width: 0;
       height: 0;
       border: 10px solid transparent;
-      border-bottom-color: white;
+      border-bottom-color: ${color};
     }
   `,
   left: `
@@ -51,7 +52,7 @@ const injectedCss = {
       width: 0;
       height: 0;
       border: 10px solid transparent;
-      border-left-color: white;
+      border-left-color: ${color};
     }
   `,
   right: `
@@ -65,16 +66,17 @@ const injectedCss = {
       width: 0;
       height: 0;
       border: 10px solid transparent;
-      border-right-color: white;
+      border-right-color: ${color};
     }
   `,
-}
+})
 
 const TooltipPopoverElement = styled.div<{
+  $background: Colors
   $placement: DynamicPopoverSide
   $mobilePlacement: DynamicPopoverSide
 }>(
-  ({ theme, $placement, $mobilePlacement }) => css`
+  ({ theme, $background, $placement, $mobilePlacement }) => css`
     position: relative;
     pointer-events: none;
     box-sizing: border-box;
@@ -83,9 +85,11 @@ const TooltipPopoverElement = styled.div<{
     border-radius: ${theme.radii.large};
     padding: ${theme.space['2.5']} ${theme.space['2.5']} ${theme.space['2.5']}
       ${theme.space['3.5']};
-    background: ${theme.colors.background};
+    background: ${theme.colors[$background] || theme.colors.background};
 
-    ${injectedCss[$mobilePlacement]}
+    ${injectedCss(theme.colors[$background] || theme.colors.background)[
+      $mobilePlacement
+    ]}
     ${mq.sm.min(css`
       &:before {
         display: none;
@@ -93,18 +97,24 @@ const TooltipPopoverElement = styled.div<{
       &:after {
         display: none;
       }
-      ${injectedCss[$placement]}
+      ${injectedCss(theme.colors[$background] || theme.colors.background)[
+        $placement
+      ]}
     `)}
   `,
 )
 
+type TooltipPopoverProps = PopoverProps & { background: Colors }
+
 const TooltipPopover = ({
   placement,
   mobilePlacement,
+  background,
   children,
-}: PopoverProps) => {
+}: TooltipPopoverProps) => {
   return (
     <TooltipPopoverElement
+      $background={background}
       $mobilePlacement={mobilePlacement}
       $placement={placement}
       data-testid="tooltip-popover"
@@ -118,12 +128,15 @@ export interface TooltipProps
   extends Omit<DynamicPopoverProps, 'popover' | 'animationFn' | 'anchorRef'> {
   /** A text or component containg the content of the popover. */
   content?: React.ReactNode
+  /** The background color for the tooltip */
+  background?: Colors
   /** The anchor element for the popover */
   children: React.ReactElement
 }
 
 export const Tooltip = ({
   content,
+  background = 'background',
   placement = 'top',
   mobilePlacement = 'top',
   children,
@@ -135,7 +148,11 @@ export const Tooltip = ({
   const AnchorElement = React.cloneElement(child, { ref: anchorRef })
 
   const popover = (
-    <TooltipPopover mobilePlacement={mobilePlacement} placement={placement}>
+    <TooltipPopover
+      background={background}
+      mobilePlacement={mobilePlacement}
+      placement={placement}
+    >
       {content}
     </TooltipPopover>
   )

From 1e93c411ebcf9a4dae84d65ce4c7330ac82a83a8 Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Mon, 4 Sep 2023 19:05:07 +0800
Subject: [PATCH 2/2] added tooltip documentation

---
 .../components/molecules/Tooltip/Tooltip.tsx  |  4 +-
 .../reference/mdx/molecules/Tooltip.docs.mdx  | 83 +++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
index 9bdcfb96..6d0a1ad8 100644
--- a/components/src/components/molecules/Tooltip/Tooltip.tsx
+++ b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -83,8 +83,8 @@ const TooltipPopoverElement = styled.div<{
     filter: drop-shadow(0px 0px 1px #e8e8e8)
       drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
     border-radius: ${theme.radii.large};
-    padding: ${theme.space['2.5']} ${theme.space['2.5']} ${theme.space['2.5']}
-      ${theme.space['3.5']};
+    padding: ${theme.space['2.5']};
+    padding-left: ${theme.space['3.5']};
     background: ${theme.colors[$background] || theme.colors.background};
 
     ${injectedCss(theme.colors[$background] || theme.colors.background)[
diff --git a/docs/src/reference/mdx/molecules/Tooltip.docs.mdx b/docs/src/reference/mdx/molecules/Tooltip.docs.mdx
index 9c6747d6..ced6c0e8 100644
--- a/docs/src/reference/mdx/molecules/Tooltip.docs.mdx
+++ b/docs/src/reference/mdx/molecules/Tooltip.docs.mdx
@@ -99,3 +99,86 @@ import { Tooltip, TooltipProps } from '@ensdomains/thorin'
 ## Props
 
 <PropsTable sourceLink={sourceLink} types={types} />
+
+## Background
+
+```tsx live=true
+<DeleteMe
+  style={{
+    alignItems: 'center',
+  }}
+>
+  <Tooltip
+    additionalGap={0}
+    content={<div>Content</div>}
+    mobilePlacement="top"
+    mobileWidth={250}
+    placement="top"
+    targetId="buttonIdTop"
+    width={250}
+    background="indigo"
+  >
+    <Button
+      id="buttonIdTop"
+      shadowless
+      style={{ width: 250 }}
+    >
+      Top
+    </Button>
+  </Tooltip>
+  <Tooltip
+    content={<div>Content</div>}
+    mobilePlacement="left"
+    mobileWidth={50}
+    placement="left"
+    targetId="buttonIdLeft"
+    width={100}
+    background="indigo"
+  >
+    <Button
+      id="buttonIdLeft"
+      shadowless
+      style={{ width: 250 }}
+    >
+      Left
+    </Button>
+  </Tooltip>
+  <Tooltip
+    additionalGap={0}
+    content={<div>Content</div>}
+    mobilePlacement="bottom"
+    mobileWidth={250}
+    open
+    placement="bottom"
+    targetId="buttonIdBottom"
+    width={250}
+    background="indigo"
+  >
+    <Button
+      id="buttonIdBottom"
+      shadowless
+      style={{ width: 250 }}
+    >
+      Bottom
+    </Button>
+  </Tooltip>
+  <Tooltip
+    content={<div>Content</div>}
+    mobilePlacement="right"
+    mobileWidth={50}
+    open
+    placement="right"
+    targetId="buttonIdRight"
+    width={100}
+    background="indigo"
+  >
+    <Button
+      id="buttonIdRight"
+      shadowless
+      style={{ width: 250 }}
+    >
+      Right
+    </Button>
+  </Tooltip>
+</DeleteMe>
+```