diff --git a/.changeset/nervous-brooms-raise.md b/.changeset/nervous-brooms-raise.md
new file mode 100644
index 00000000..e19ba615
--- /dev/null
+++ b/.changeset/nervous-brooms-raise.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-floating-components": major
+---
+
+Tooltip: Reconfigure API for easier usage + add zIndex as a prop
diff --git a/packages/syntax-floating-components/src/Tooltip/Tooltip.stories.tsx b/packages/syntax-floating-components/src/Tooltip/Tooltip.stories.tsx
index e3767d84..c0406d2f 100644
--- a/packages/syntax-floating-components/src/Tooltip/Tooltip.stories.tsx
+++ b/packages/syntax-floating-components/src/Tooltip/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, type ReactElement } from "react";
 import type { StoryObj, Meta } from "@storybook/react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 import Button from "../../../syntax-core/src/Button/Button";
 import IconButton from "../../../syntax-core/src/IconButton/IconButton";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -48,7 +48,7 @@ export default {
         defaultValue: { summary: "absolute" },
       },
     },
-    children: {
+    content: {
       control: { type: "text" },
       description: "The string value to show on the tooltip content",
     },
@@ -62,41 +62,39 @@ export const Default: StoryObj<typeof Tooltip> = {
     placement: "right",
     initialOpen: true,
     strategy: "absolute",
-    children: "This is a tooltip",
+    content: "This is a tooltip",
   },
-  render: ({ delay, placement, initialOpen, strategy, children }) => (
+  render: ({ delay, placement, initialOpen, strategy, content }) => (
     <div style={{ margin: "240px" }}>
       <Tooltip
         delay={delay}
         placement={placement}
         initialOpen={initialOpen}
         strategy={strategy}
+        content={content}
       >
-        <TooltipTrigger>
-          <IconButton
-            accessibilityLabel="Info Icon Button"
-            icon={InfoOutlinedIcon}
-            onClick={() => alert("Default button pressed")}
-            color="tertiary"
-            size="lg"
-          />
-        </TooltipTrigger>
-        <TooltipContent>{children}</TooltipContent>
+        <IconButton
+          accessibilityLabel="Info Icon Button"
+          icon={InfoOutlinedIcon}
+          onClick={() => alert("Default button pressed")}
+          color="tertiary"
+          size="lg"
+        />
       </Tooltip>
     </div>
   ),
 };
 
 export const UncontrolledButtonTooltip: StoryObj<typeof Tooltip> = {
+  args: {
+    content: "This is a button",
+  },
   render: () => (
-    <Tooltip>
-      <TooltipTrigger>
-        <Button
-          text="My trigger"
-          onClick={() => alert("UncontrolledButtonTooltip pressed")}
-        />
-      </TooltipTrigger>
-      <TooltipContent>This is a button</TooltipContent>
+    <Tooltip content="This is a button">
+      <Button
+        text="My trigger"
+        onClick={() => alert("UncontrolledButtonTooltip pressed")}
+      />
     </Tooltip>
   ),
 };
@@ -133,27 +131,15 @@ export const ControlledTooltip = (): ReactElement => {
       >
         <Tooltip
           open={open}
+          content="This is really long text"
           onOpen={() => setOpen(true)}
           onClose={() => setOpen(false)}
         >
-          <TooltipTrigger>
-            <Button
-              ref={ref}
-              text="My trigger"
-              onClick={() => setOpen((v) => !v)}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <span style={{ display: "block" }}>
-              This is a button and a really long sentence.
-            </span>
-            <a
-              href="http://localhost:6006/?path=/docs/floating-components-tooltip--docs"
-              style={{ textUnderlinePosition: "under", color: "white" }}
-            >
-              Learn more
-            </a>
-          </TooltipContent>
+          <Button
+            ref={ref}
+            text="My trigger"
+            onClick={() => setOpen((v) => !v)}
+          />
         </Tooltip>
       </div>
     </div>
@@ -187,7 +173,7 @@ export const RadioButtonGroupWithTooltips = (): ReactElement => {
   return (
     <Box paddingY={8} paddingX={4} backgroundColor="gray200">
       <Box display="flex" alignItems="center" direction="column">
-        <Box padding={7} rounding="xl" backgroundColor="white" width="100%">
+        <Box padding={7} rounding="md" backgroundColor="white" width="100%">
           <Box
             display="flex"
             direction="column"
@@ -205,11 +191,8 @@ export const RadioButtonGroupWithTooltips = (): ReactElement => {
                     onChange={(e) => setChoice(Number(e.target.value))}
                     checked={choice === value}
                   />
-                  <Tooltip placement="left">
-                    <TooltipTrigger>
-                      <InfoOutlinedIcon width={20} height={20} />
-                    </TooltipTrigger>
-                    <TooltipContent>{content}</TooltipContent>
+                  <Tooltip placement="left" content={content}>
+                    <InfoOutlinedIcon width={20} height={20} />
                   </Tooltip>
                 </Box>
               ))}
diff --git a/packages/syntax-floating-components/src/Tooltip/Tooltip.test.tsx b/packages/syntax-floating-components/src/Tooltip/Tooltip.test.tsx
index 828e946e..3776430c 100644
--- a/packages/syntax-floating-components/src/Tooltip/Tooltip.test.tsx
+++ b/packages/syntax-floating-components/src/Tooltip/Tooltip.test.tsx
@@ -1,5 +1,5 @@
 import { screen, render } from "@testing-library/react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 import { expect } from "vitest";
 import userEvent from "@testing-library/user-event";
 class ResizeObserver {
@@ -19,11 +19,8 @@ window.ResizeObserver = ResizeObserver;
 describe("tooltip", () => {
   it("renders successfully", () => {
     render(
-      <Tooltip>
-        <TooltipTrigger>
-          <button>My trigger</button>
-        </TooltipTrigger>
-        <TooltipContent>My tooltip</TooltipContent>
+      <Tooltip content="My tooltip">
+        <button>My trigger</button>
       </Tooltip>,
     );
     expect(screen.getByRole("button")).toBeInTheDocument();
@@ -32,11 +29,8 @@ describe("tooltip", () => {
 
   it("tooltip dialogue appears", async () => {
     render(
-      <Tooltip>
-        <TooltipTrigger>
-          <button>My trigger</button>
-        </TooltipTrigger>
-        <TooltipContent>My tooltip</TooltipContent>
+      <Tooltip content="My tooltip">
+        <button>My trigger</button>
       </Tooltip>,
     );
 
diff --git a/packages/syntax-floating-components/src/Tooltip/Tooltip.tsx b/packages/syntax-floating-components/src/Tooltip/Tooltip.tsx
index 85fc1426..a07e8275 100644
--- a/packages/syntax-floating-components/src/Tooltip/Tooltip.tsx
+++ b/packages/syntax-floating-components/src/Tooltip/Tooltip.tsx
@@ -57,9 +57,15 @@ type TooltipOptions = {
    * @defaultValue "absolute"
    */
   strategy?: Strategy;
+  /**
+   * The z-index of the tooltip
+   *
+   * @defaultValue 0
+   */
+  zIndex?: number;
 };
 
-export function useTooltip({
+function useTooltip({
   delay = 0,
   initialOpen = false,
   open: controlledOpen,
@@ -67,6 +73,7 @@ export function useTooltip({
   strategy = "absolute",
   onOpen = undefined,
   onClose = undefined,
+  zIndex = 0,
 }: TooltipOptions): UseFloatingReturn & {
   getReferenceProps: (
     userProps?: React.HTMLProps<Element> | undefined,
@@ -80,6 +87,7 @@ export function useTooltip({
   arrowRef: React.MutableRefObject<null>;
   open: boolean;
   setOpen: (open: boolean) => void;
+  zIndex: number;
 } {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
 
@@ -136,13 +144,14 @@ export function useTooltip({
 
   return React.useMemo(
     () => ({
+      zIndex,
       open,
       setOpen,
       ...interactions,
       ...data,
       arrowRef,
     }),
-    [open, setOpen, interactions, data],
+    [zIndex, open, setOpen, interactions, data],
   );
 }
 
@@ -160,24 +169,36 @@ const useTooltipContext = () => {
   return context;
 };
 
-/**
- * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/floating-components-tooltip--docs) displays contextual information on hover or focus.
- */
-export function Tooltip({
-  children,
-  ...options
-}: { children: React.ReactNode } & TooltipOptions): JSX.Element {
-  // This can accept any props as options, e.g. `placement`,
-  // or other positioning options.
-  const tooltip = useTooltip(options);
+const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement>
+>(function TooltipContent(props, propRef) {
+  const { zIndex, context: floatingContext, ...context } = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!context.open) return null;
+
   return (
-    <TooltipContext.Provider value={tooltip}>
-      {children}
-    </TooltipContext.Provider>
+    <FloatingPortal>
+      <div
+        {...context.getFloatingProps(props)}
+        ref={ref}
+        className={styles.tooltipContent}
+        style={{
+          ...context.floatingStyles,
+          zIndex,
+        }}
+      >
+        <Typography size={100} color="white">
+          {props.children}
+        </Typography>
+        <FloatingArrow ref={context.arrowRef} context={floatingContext} />
+      </div>
+    </FloatingPortal>
   );
-}
+});
 
-export const TooltipTrigger = React.forwardRef<
+const TooltipTrigger = React.forwardRef<
   HTMLElement,
   React.HTMLProps<HTMLElement>
 >(function TooltipTrigger({ children, ...props }, propRef) {
@@ -207,30 +228,40 @@ export const TooltipTrigger = React.forwardRef<
   }
 });
 
-export const TooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLProps<HTMLDivElement>
->(function TooltipContent(props, propRef) {
-  const { context: floatingContext, ...context } = useTooltipContext();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+/**
+ * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/floating-components-tooltip--docs) displays contextual information on hover or focus.
+ *
+ *
+ * Usage:
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <IconButton />
+ * </Tooltip>
+ * ```
+ */
+export function Tooltip({
+  children,
+  content,
+  ...options
+}: {
+  children: React.ReactNode;
+  zIndex?: number;
+  content: string;
+} & TooltipOptions): JSX.Element {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const tooltip = useTooltip(options);
 
-  if (!context.open) return null;
+  const value = React.useMemo(() => {
+    return {
+      ...tooltip,
+    };
+  }, [tooltip]);
 
   return (
-    <FloatingPortal>
-      <div
-        {...context.getFloatingProps(props)}
-        ref={ref}
-        className={styles.tooltipContent}
-        style={{
-          ...context.floatingStyles,
-        }}
-      >
-        <Typography size={100} color="white">
-          {props.children}
-        </Typography>
-        <FloatingArrow ref={context.arrowRef} context={floatingContext} />
-      </div>
-    </FloatingPortal>
+    <TooltipContext.Provider value={value}>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent>{content}</TooltipContent>
+    </TooltipContext.Provider>
   );
-});
+}
diff --git a/packages/syntax-floating-components/src/index.tsx b/packages/syntax-floating-components/src/index.tsx
index 56c6b645..84975483 100644
--- a/packages/syntax-floating-components/src/index.tsx
+++ b/packages/syntax-floating-components/src/index.tsx
@@ -1,11 +1,4 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip/Tooltip";
+import { Tooltip } from "./Tooltip/Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover/Popover";
 
-export {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-};
+export { Popover, PopoverContent, PopoverTrigger, Tooltip };