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
+
+## Background
+
+```tsx live=true
+
+ Content}
+ mobilePlacement="top"
+ mobileWidth={250}
+ placement="top"
+ targetId="buttonIdTop"
+ width={250}
+ background="indigo"
+ >
+
+
+ Content}
+ mobilePlacement="left"
+ mobileWidth={50}
+ placement="left"
+ targetId="buttonIdLeft"
+ width={100}
+ background="indigo"
+ >
+
+
+ Content}
+ mobilePlacement="bottom"
+ mobileWidth={250}
+ open
+ placement="bottom"
+ targetId="buttonIdBottom"
+ width={250}
+ background="indigo"
+ >
+
+
+ Content}
+ mobilePlacement="right"
+ mobileWidth={50}
+ open
+ placement="right"
+ targetId="buttonIdRight"
+ width={100}
+ background="indigo"
+ >
+
+
+
+```