Merge pull request #128 from ensdomains/fet980-tooltip-background

Add ability to set tooltip background
ensdomains · Sep 5, 2023 · 0a92162 · 0a92162
2 parents d504185 + 1e93c41
commit 0a92162
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 14 deletions.
diff --git 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,46 +66,55 @@ 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;
     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']};
-    background: ${theme.colors.background};
+    padding: ${theme.space['2.5']};
+    padding-left: ${theme.space['3.5']};
+    background: ${theme.colors[$background] || theme.colors.background};
 
-    ${injectedCss[$mobilePlacement]}
+    ${injectedCss(theme.colors[$background] || theme.colors.background)[
+      $mobilePlacement
+    ]}
     ${mq.sm.min(css`
       &:before {
         display: none;
       }
       &: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>
   )

diff --git 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>
+```