added tooltip documentation

ensdomains · Sep 4, 2023 · 1e93c41 · 1e93c41
1 parent f8f67b7
commit 1e93c41
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 2 deletions.
diff --git 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
@@ -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>
+```