diff --git a/.changeset/add-evo-tooltip.md b/.changeset/add-evo-tooltip.md
new file mode 100644
index 00000000000..8c681518fd5
--- /dev/null
+++ b/.changeset/add-evo-tooltip.md
@@ -0,0 +1,6 @@
+---
+"@evo-web/react": patch
+"@evo-web/marko": patch
+---
+
+Add EvoTooltip component with an EvoButton host by default, and default EvoButton to `type="button"`. Evo Tooltip now uses one hover-and-focus trigger model in both experimental packages, so the `noHover` option is removed.
diff --git a/.claude/skills/evo-app-migrate-react/SKILL.md b/.claude/skills/evo-app-migrate-react/SKILL.md
index 45d87254716..9bd152aa1e1 100644
--- a/.claude/skills/evo-app-migrate-react/SKILL.md
+++ b/.claude/skills/evo-app-migrate-react/SKILL.md
@@ -86,6 +86,7 @@ When migrating a listed component, read the linked file completely and apply the
 - `ebay-radio`: [evo-radio.md](components/evo-radio.md)
 - `ebay-tabs`: [evo-tabs.md](components/evo-tabs.md)
 - `ebay-textbox`: [evo-input.md](components/evo-input.md) / [evo-textarea.md](components/evo-textarea.md)
+- `ebay-tooltip`: [evo-tooltip.md](components/evo-tooltip.md)
 
 ---
 
diff --git a/.claude/skills/evo-app-migrate-react/components/evo-tooltip.md b/.claude/skills/evo-app-migrate-react/components/evo-tooltip.md
new file mode 100644
index 00000000000..6011daacdc4
--- /dev/null
+++ b/.claude/skills/evo-app-migrate-react/components/evo-tooltip.md
@@ -0,0 +1,96 @@
+# ebay-tooltip → evo-tooltip
+
+## Composition
+
+`EvoTooltipHost` renders its host through `as` instead of cloning a child. It defaults to `EvoButton`, which renders `<button type="button">`; use `as` for other host elements or components. Move the old host element's props and content onto `EvoTooltipHost`.
+
+```diff
+ <EvoTooltip>
+-  <EbayTooltipHost>
+-    <EbayButton priority="secondary">Information</EbayButton>
+-  </EbayTooltipHost>
++  <EvoTooltipHost priority="secondary">
++    Information
++  </EvoTooltipHost>
+   <EvoTooltipContent>Additional information</EvoTooltipContent>
+ </EvoTooltip>
+```
+
+The selected component must pass all received attributes and its React 19 `ref` to the underlying DOM element. If the selected component already uses `as`, wrap that configuration in a custom component:
+
+```tsx
+import { Link } from "react-router";
+import { EvoButton, type AnchorButtonProps } from "@evo-web/react/button";
+import {
+  EvoTooltip,
+  EvoTooltipContent,
+  EvoTooltipHost,
+} from "@evo-web/react/tooltip";
+
+type CustomEvoButtonProps = Omit<AnchorButtonProps, "as">;
+
+function CustomEvoButton({ ref, href, ...rest }: CustomEvoButtonProps) {
+  return (
+    <EvoButton
+      {...rest}
+      ref={ref}
+      href={href}
+      as={({ href: destination, ...linkProps }) => (
+        <Link {...linkProps} to={destination ?? ""} />
+      )}
+    />
+  );
+}
+
+<EvoTooltip>
+  <EvoTooltipHost as={CustomEvoButton} href="/edit">
+    Edit
+  </EvoTooltipHost>
+  <EvoTooltipContent>Edit this item</EvoTooltipContent>
+</EvoTooltip>;
+```
+
+`EvoTooltipHeading` is a new optional sub-component and supports an `as` prop.
+
+## Prop changes
+
+- `onExpand` and `onCollapse` → `onOpenChange(open)`.
+- `pointer` → `placement`. `pointer` described the arrow side, while `placement` describes the overlay side, so the primary direction is inverted:
+  - `top` → `bottom`, `right` → `left`, `bottom` → `top`, `left` → `right`.
+  - `*-left` / `*-top` → `*-start` after inverting the primary direction.
+  - `*-right` / `*-bottom` → `*-end` after inverting the primary direction.
+- `noFlip` → `flip` with inverted meaning.
+- `noShift` → `shift` with inverted meaning.
+- `notInline` → `inline` with inverted meaning.
+- `noHover` is removed. `EvoTooltip` always opens on hover and on focus. Use `EvoInfotip` for content that should open on click instead.
+- `overlayStyle` is removed; positioning is managed by Floating UI.
+- `defaultOpen` is added for uncontrolled initial state.
+- The default placement is now `bottom`, matching evo-marko. The legacy default pointer placed the overlay on top.
+- The default `offset` changes from `6` to `8`, matching evo-marko.
+- `EvoTooltipContent` generates the tooltip ID; its `id` prop is removed.
+- Tooltip-only content no longer supports `showCloseButton`, `a11yCloseText`, `ariaLabelledBy`, or `onClose`. Use an infotip or popover for interactive content.
+
+```diff
+- <EbayTooltip
+-   pointer="bottom-left"
+-   noFlip
+-   noShift
+-   notInline
+-   onExpand={handleExpand}
+-   onCollapse={handleCollapse}
+- >
++ <EvoTooltip
++   placement="top-start"
++   flip={false}
++   shift={false}
++   inline={false}
++   onOpenChange={(open) => {
++     if (open) handleExpand();
++     else handleCollapse();
++   }}
++ >
+```
+
+## Removed exports
+
+The low-level `Tooltip`, `TooltipFooter`, `PointerDirection`, `DEFAULT_POINTER_DIRECTION`, and `POINTER_STYLES` exports are removed. Use the exported Evo Tooltip components and `TooltipPlacement` type.
diff --git a/agent-feedback/items/2026-08-20-align-evo-react-icon-story-layout.md b/agent-feedback/items/2026-08-20-align-evo-react-icon-story-layout.md
new file mode 100644
index 00000000000..aa0731d2268
--- /dev/null
+++ b/agent-feedback/items/2026-08-20-align-evo-react-icon-story-layout.md
@@ -0,0 +1,12 @@
+---
+type: cleanup
+impact: low
+effort: med
+site: packages/evo-react/scripts/import-svg.ts › saveIconComponents
+---
+
+# Align the generated Evo React icon gallery with the shared icon layout
+
+The Evo React icon generator emits the `AllIcons` story as a table, while Evo Marko renders its gallery with the shared `icon-examples` class now styled by `@evo-web/storybook-addon-theme`. Update the React generator template to emit equivalent `icon-examples` markup, then regenerate `packages/evo-react/src/icon/icon.stories.tsx`; do not edit the generated story directly. This will keep the icon gallery layout consistent across both framework Storybooks.
+
+Check: Run `rg -n '(<table>|icon-examples)' packages/evo-react/scripts/import-svg.ts packages/evo-marko/src/tags/evo-icon/examples/all.marko` and compare the generated React structure with the Marko example.
diff --git a/agent-feedback/items/2026-08-20-react-children-deprecation-wording.md b/agent-feedback/items/2026-08-20-react-children-deprecation-wording.md
new file mode 100644
index 00000000000..7a0eea7d009
--- /dev/null
+++ b/agent-feedback/items/2026-08-20-react-children-deprecation-wording.md
@@ -0,0 +1,12 @@
+---
+type: unclear
+impact: low
+effort: low
+site: docs/adr/0005-evo-react-child-component-composition.md › Context
+---
+
+# Correct the claim that React child composition APIs are deprecated
+
+The ADR says React child-scanning APIs are deprecated by React, but React 19 still supports both `Children` and `cloneElement`. React documents them as legacy APIs that are uncommon, fragile, and discouraged for new code rather than deprecated or removed. Replace the deprecation claim with that narrower rationale so future API decisions do not rely on an incorrect compatibility constraint.
+
+Check: Run `rg -n "deprecated by React" docs/adr/0005-evo-react-child-component-composition.md`, then compare the claim with https://react.dev/reference/react/Children, https://react.dev/reference/react/cloneElement, and https://react.dev/reference/react/legacy.
diff --git a/agent-feedback/items/2026-09-03-eslint-lints-local-storybook-site.md b/agent-feedback/items/2026-09-03-eslint-lints-local-storybook-site.md
new file mode 100644
index 00000000000..eab8ce7a110
--- /dev/null
+++ b/agent-feedback/items/2026-09-03-eslint-lints-local-storybook-site.md
@@ -0,0 +1,12 @@
+---
+type: dx
+impact: med
+effort: low
+site: packages/evo-marko/eslint.config.mjs › globalIgnores
+---
+
+# Ignore local Storybook `_site` in ESLint
+
+`packages/evo-marko` gitignores `_site`, but `eslint.config.mjs` `globalIgnores` does not list it. After `npm run build:storybook` in that package, `eslint .` (via `npm run lint` / the husky pre-push `npm run build`) lints generated `sb-manager` files and fails on missing plugin rules. The same `_site` output exists for other Storybook packages. Add `_site` to ESLint ignores next to `dist` and `node_modules`.
+
+Check: from `packages/evo-marko`, run `npm run build:storybook`, then `npx eslint packages/evo-marko/_site/sb-manager/runtime.js` from the package directory (or `npm run lint -w @evo-web/marko`). Lint reports missing-rule errors on the generated file. After adding `_site` to `globalIgnores`, the same command ignores it.
diff --git a/agent-feedback/items/2026-09-03-gitignore-vitest-attachments.md b/agent-feedback/items/2026-09-03-gitignore-vitest-attachments.md
new file mode 100644
index 00000000000..535ff1a4acd
--- /dev/null
+++ b/agent-feedback/items/2026-09-03-gitignore-vitest-attachments.md
@@ -0,0 +1,12 @@
+---
+type: dx
+impact: low
+effort: low
+site: packages/evo-react/.gitignore
+---
+
+# Ignore vitest browser failure attachments
+
+Vitest browser mode writes failure screenshots to `packages/evo-react/.vitest-attachments/`, which no `.gitignore` covers, so every failing browser test leaves untracked binaries that are easy to commit by accident. The same `.gitignore` already lists `__screenshots__`, so the attachments directory looks like an oversight rather than a deliberate choice. Add `.vitest-attachments` next to `__screenshots__`, and check the other packages that run `vitest --browser` for the same gap.
+
+Check: run `npx vitest run --browser.headless src/tooltip` from `packages/evo-react` with a deliberately failing assertion, then `git status --short`. The attachments directory is listed as untracked.
diff --git a/agent-feedback/items/2026-09-03-tooltip-host-aria-expanded-on-textbox.md b/agent-feedback/items/2026-09-03-tooltip-host-aria-expanded-on-textbox.md
new file mode 100644
index 00000000000..70c75ce31ad
--- /dev/null
+++ b/agent-feedback/items/2026-09-03-tooltip-host-aria-expanded-on-textbox.md
@@ -0,0 +1,12 @@
+---
+type: a11y
+impact: med
+effort: med
+site: packages/evo-react/src/tooltip/tooltip-host.tsx › EvoTooltipHost
+---
+
+# Reconsider `aria-expanded` on non-button tooltip hosts
+
+`EvoTooltipHost` always sets `aria-expanded` on the component passed to `as`. With `as={EvoInput}` that attribute lands on the inner `<input>`, because `EvoInput` forwards unknown props to the control while keeping `className` on the `.textbox` wrapper. A plain textbox announcing collapsed/expanded implies a combobox that does not exist, and ARIA 1.2 moved `aria-expanded` off `textbox` to `combobox`. The split also means `.tooltip__host` and the ARIA state end up on different elements for input hosts, which is easy to misread when writing tests. Decide whether a tooltip host needs `aria-expanded` at all, given the tooltip is described through `aria-describedby`, and scope the attribute to hosts where it is valid. Checked in `evo-react` only; `evo-marko`'s `<evo-tooltip>` puts `aria-expanded` on the `<@host>` tag it renders, so confirm that case separately.
+
+Check: `npx vitest run --browser.headless src/tooltip/test/test.browser.tsx` from `packages/evo-react` and read the "opens when a nested input host receives focus" test. Asserting `aria-expanded` on `.tooltip__host` fails, while asserting it on the element returned by `getByPlaceholder("Email address")` passes.
diff --git a/docs/adr/0007-tooltip-trigger-behavior.md b/docs/adr/0007-tooltip-trigger-behavior.md
new file mode 100644
index 00000000000..13bdb489dda
--- /dev/null
+++ b/docs/adr/0007-tooltip-trigger-behavior.md
@@ -0,0 +1,34 @@
+# 7. Tooltip Trigger Behavior
+
+**Date:** 2026-09-03
+
+## Status
+
+Accepted
+
+## Context
+
+ARIA and MIND define a tooltip as content that appears when its host receives hover or focus.
+
+The `noHover` option added a focus-only mode. That mode treated pointer-induced focus inconsistently across host types and browsers. Click history is not relevant to tooltip visibility. The relevant conditions are whether the pointer is over the host or the host has focus.
+
+## Decision
+
+Remove `noHover` from `@evo-web/react` and `@evo-web/marko`.
+
+Evo Tooltip supports one trigger model:
+
+- Hover opens the tooltip.
+- Focus opens the tooltip.
+- Mouse leave or blur closes the tooltip.
+- Escape closes the tooltip.
+
+The tooltip does not distinguish between keyboard focus and pointer-induced focus. Click has no separate tooltip behavior.
+
+Use Evo Infotip when content should open through an explicit click rather than hover or focus.
+
+## Consequences
+
+Consumers have one tooltip behavior across React and Marko. Existing `noHover` usages must remove the prop. Click-triggered disclosure should use Evo Infotip.
+
+Keyboard users still get tooltip content through focus. Pointer users get it through hover.
diff --git a/packages/evo-marko/.storybook/preview.ts b/packages/evo-marko/.storybook/preview.ts
index a67de02d348..e977beae029 100644
--- a/packages/evo-marko/.storybook/preview.ts
+++ b/packages/evo-marko/.storybook/preview.ts
@@ -1,4 +1,3 @@
-import "./custom-styles.css";
 import "@ebay/skin/dist/global/global.css";
 import "@ebay/skin/dist/utility/utility.css";
 import "@ebay/skin/marketsans";
@@ -8,7 +7,6 @@ import type { Preview } from "@storybook/marko";
 export default {
   tags: ["autodocs"],
   parameters: {
-    layout: "centered",
     controls: { expanded: true, sort: "requiredFirst" },
     docs: { controls: { sort: "requiredFirst" } },
     options: {
diff --git a/packages/evo-marko/src/tags/evo-tooltip/examples/no-hover.marko b/packages/evo-marko/src/tags/evo-tooltip/examples/no-hover.marko
deleted file mode 100644
index ddd45447e60..00000000000
--- a/packages/evo-marko/src/tags/evo-tooltip/examples/no-hover.marko
+++ /dev/null
@@ -1,6 +0,0 @@
-<evo-tooltip ...input noHover>
-  <@host>
-    <evo-input placeholder="Email address"/>
-  </@host>
-  Please choose the email address you use the most.
-</evo-tooltip>
diff --git a/packages/evo-marko/src/tags/evo-tooltip/index.marko b/packages/evo-marko/src/tags/evo-tooltip/index.marko
index 8a272de25e7..75c4721fba9 100644
--- a/packages/evo-marko/src/tags/evo-tooltip/index.marko
+++ b/packages/evo-marko/src/tags/evo-tooltip/index.marko
@@ -7,7 +7,6 @@ export interface Input extends Marko.HTML.Span {
   flip?: boolean;
   shift?: boolean;
   inline?: boolean;
-  noHover?: boolean;
   host: Marko.AttrTag<
     Marko.HTML.Span & {
       as?: Marko.Renderable;
@@ -27,7 +26,6 @@ export interface Input extends Marko.HTML.Span {
   flip,
   shift,
   inline,
-  noHover,
   open: inputOpen,
   openChange,
   host,
@@ -73,26 +71,18 @@ export interface Input extends Marko.HTML.Span {
 <span/$root
   ...htmlInput
   class=["tooltip", inputClass]
-  onMouseEnter=(
-    noHover
-      ? onMouseEnter
-      : (e, el) => {
-          clearTimeout(hoverTimeout);
-          open = true;
-          onMouseEnter && onMouseEnter(e, el);
-        }
-  )
-  onMouseLeave=(
-    noHover
-      ? onMouseLeave
-      : (e, el) => {
-          clearTimeout(hoverTimeout);
-          hoverTimeout = setTimeout(() => {
-            open = false;
-          }, 300);
-          onMouseLeave && onMouseLeave(e, el);
-        }
-  )
+  onMouseEnter(e, el) {
+    clearTimeout(hoverTimeout);
+    open = true;
+    onMouseEnter && onMouseEnter(e, el);
+  }
+  onMouseLeave(e, el) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = setTimeout(() => {
+      open = false;
+    }, 300);
+    onMouseLeave && onMouseLeave(e, el);
+  }
   onFocusIn(e, el) {
     open = true;
     onFocusIn && onFocusIn(e, el);
diff --git a/packages/evo-marko/src/tags/evo-tooltip/tooltip.stories.ts b/packages/evo-marko/src/tags/evo-tooltip/tooltip.stories.ts
index 55482d4c9c4..6d94530a16b 100644
--- a/packages/evo-marko/src/tags/evo-tooltip/tooltip.stories.ts
+++ b/packages/evo-marko/src/tags/evo-tooltip/tooltip.stories.ts
@@ -3,8 +3,6 @@ import { type Meta } from "@storybook/marko";
 import Tooltip, { type Input } from "./index.marko";
 import DefaultTemplate from "./examples/default.marko";
 import DefaultTemplateCode from "./examples/default.marko?raw";
-import NoHoverTemplate from "./examples/no-hover.marko";
-import NoHoverTemplateCode from "./examples/no-hover.marko?raw";
 import PlacementsTemplate from "./examples/placements.marko";
 import PlacementsTemplateCode from "./examples/placements.marko?raw";
 import IconButtonHostTemplate from "./examples/icon-button-host.marko";
@@ -73,12 +71,6 @@ export default {
       description: "Enable inline positioning middleware",
       table: { defaultValue: { summary: "true" } },
     },
-    noHover: {
-      type: "boolean",
-      control: "boolean",
-      description: "Disable hover behavior (only focus will open the tooltip)",
-      table: { defaultValue: { summary: "false" } },
-    },
     host: {
       type: { name: "object", value: {}, required: true },
       description: "The host element that triggers the tooltip.",
@@ -125,11 +117,6 @@ export const Default = buildExtensionTemplate(
   DefaultTemplateCode,
 );
 
-export const NoHover = buildExtensionTemplate(
-  NoHoverTemplate,
-  NoHoverTemplateCode,
-);
-
 export const IconButtonHost = buildExtensionTemplate(
   IconButtonHostTemplate,
   IconButtonHostTemplateCode,
diff --git a/packages/evo-react/src/alert-dialog/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/alert-dialog/test/__snapshots__/test.server.tsx.snap
index 045c28e2701..f45ff408d0b 100644
--- a/packages/evo-react/src/alert-dialog/test/__snapshots__/test.server.tsx.snap
+++ b/packages/evo-react/src/alert-dialog/test/__snapshots__/test.server.tsx.snap
@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`EvoAlertDialog SSR > renders default (closed) controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="none" aria-labelledby="_R_0_" class="dialog dialog--narrow dialog--close"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Alert!</h2></div><div id="_R_0H1_" class="dialog__main"><p>You must acknowledge this alert to continue.</p></div><div class="dialog__footer"><button autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">OK</button></div></dialog>"`;
+exports[`EvoAlertDialog SSR > renders default (closed) controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="none" aria-labelledby="_R_0_" class="dialog dialog--narrow dialog--close"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Alert!</h2></div><div id="_R_0H1_" class="dialog__main"><p>You must acknowledge this alert to continue.</p></div><div class="dialog__footer"><button type="button" autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">OK</button></div></dialog>"`;
 
-exports[`EvoAlertDialog SSR > renders open controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="none" aria-labelledby="_R_0_" class="dialog dialog--narrow"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Alert!</h2></div><div id="_R_0H1_" class="dialog__main"><p>You must acknowledge this alert to continue.</p></div><div class="dialog__footer"><button autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">OK</button></div></dialog>"`;
+exports[`EvoAlertDialog SSR > renders open controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="none" aria-labelledby="_R_0_" class="dialog dialog--narrow"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Alert!</h2></div><div id="_R_0H1_" class="dialog__main"><p>You must acknowledge this alert to continue.</p></div><div class="dialog__footer"><button type="button" autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">OK</button></div></dialog>"`;
diff --git a/packages/evo-react/src/button/button.tsx b/packages/evo-react/src/button/button.tsx
index d7972450157..78757257c83 100644
--- a/packages/evo-react/src/button/button.tsx
+++ b/packages/evo-react/src/button/button.tsx
@@ -125,6 +125,7 @@ export function EvoButton({
 
   return (
     <button
+      type="button"
       {...(rest as React.ComponentProps<"button">)}
       disabled={disabled}
       aria-disabled={partiallyDisabled ? "true" : undefined}
diff --git a/packages/evo-react/src/button/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/button/test/__snapshots__/test.server.tsx.snap
index 8b6419160a0..c2055660ebc 100644
--- a/packages/evo-react/src/button/test/__snapshots__/test.server.tsx.snap
+++ b/packages/evo-react/src/button/test/__snapshots__/test.server.tsx.snap
@@ -1,85 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`EvoButton SSR > should render button with bodyState=expand 1`] = `"<button class="btn btn--secondary"><span class="btn__cell"><span class="btn__text">Button</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-down-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-chevron-down-16"><path d="M8.707 12.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L8 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6Z"/></symbol></defs></svg></span></button>"`;
+exports[`EvoButton SSR > should render button with bodyState=expand 1`] = `"<button type="button" class="btn btn--secondary"><span class="btn__cell"><span class="btn__text">Button</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-down-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-chevron-down-16"><path d="M8.707 12.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L8 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6Z"/></symbol></defs></svg></span></button>"`;
 
-exports[`EvoButton SSR > should render button with bodyState=loading 1`] = `"<button aria-live="polite" class="btn btn--secondary"><span class="btn__cell"><span>Loading...</span></span></button>"`;
+exports[`EvoButton SSR > should render button with bodyState=loading 1`] = `"<button type="button" aria-live="polite" class="btn btn--secondary"><span class="btn__cell"><span>Loading...</span></span></button>"`;
 
-exports[`EvoButton SSR > should render button with borderless=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with borderless=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with borderless=true 1`] = `"<button class="btn btn--borderless">Button</button>"`;
+exports[`EvoButton SSR > should render button with borderless=true 1`] = `"<button type="button" class="btn btn--borderless">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with disabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with disabled=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with disabled=true 1`] = `"<button disabled="" class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with disabled=true 1`] = `"<button type="button" disabled="" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with fixedHeight=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with fixedHeight=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with fixedHeight=true 1`] = `"<button class="btn btn--secondary btn--fixed-height">Button</button>"`;
+exports[`EvoButton SSR > should render button with fixedHeight=true 1`] = `"<button type="button" class="btn btn--secondary btn--fixed-height">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with fluid=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with fluid=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with fluid=true 1`] = `"<button class="btn btn--secondary btn--fluid">Button</button>"`;
+exports[`EvoButton SSR > should render button with fluid=true 1`] = `"<button type="button" class="btn btn--secondary btn--fluid">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with partiallyDisabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with partiallyDisabled=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with partiallyDisabled=true 1`] = `"<button aria-disabled="true" class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with partiallyDisabled=true 1`] = `"<button type="button" aria-disabled="true" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with priority=none 1`] = `"<button class="btn">Button</button>"`;
+exports[`EvoButton SSR > should render button with priority=none 1`] = `"<button type="button" class="btn">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with priority=primary 1`] = `"<button class="btn btn--primary">Button</button>"`;
+exports[`EvoButton SSR > should render button with priority=primary 1`] = `"<button type="button" class="btn btn--primary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with priority=secondary 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with priority=secondary 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with priority=tertiary 1`] = `"<button class="btn btn--tertiary">Button</button>"`;
+exports[`EvoButton SSR > should render button with priority=tertiary 1`] = `"<button type="button" class="btn btn--tertiary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with size=large 1`] = `"<button class="btn btn--secondary btn--large">Button</button>"`;
+exports[`EvoButton SSR > should render button with size=large 1`] = `"<button type="button" class="btn btn--secondary btn--large">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with size=small 1`] = `"<button class="btn btn--secondary btn--small">Button</button>"`;
+exports[`EvoButton SSR > should render button with size=small 1`] = `"<button type="button" class="btn btn--secondary btn--small">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with split=end 1`] = `"<button class="btn btn--primary btn--split-end">Button</button>"`;
+exports[`EvoButton SSR > should render button with split=end 1`] = `"<button type="button" class="btn btn--primary btn--split-end">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with split=start 1`] = `"<button class="btn btn--primary btn--split-start">Button</button>"`;
+exports[`EvoButton SSR > should render button with split=start 1`] = `"<button type="button" class="btn btn--primary btn--split-start">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with transparent=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with transparent=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with transparent=true 1`] = `"<button class="btn btn--secondary btn--transparent">Button</button>"`;
+exports[`EvoButton SSR > should render button with transparent=true 1`] = `"<button type="button" class="btn btn--secondary btn--transparent">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with truncate=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with truncate=false 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with truncate=true 1`] = `"<button class="btn btn--secondary btn--truncated">Button</button>"`;
+exports[`EvoButton SSR > should render button with truncate=true 1`] = `"<button type="button" class="btn btn--secondary btn--truncated">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with variant=destructive 1`] = `"<button class="btn btn--secondary btn--destructive">Button</button>"`;
+exports[`EvoButton SSR > should render button with variant=destructive 1`] = `"<button type="button" class="btn btn--secondary btn--destructive">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with variant=form 1`] = `"<button class="btn btn--form">Button</button>"`;
+exports[`EvoButton SSR > should render button with variant=form 1`] = `"<button type="button" class="btn btn--form">Button</button>"`;
 
-exports[`EvoButton SSR > should render button with variant=standard 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render button with variant=standard 1`] = `"<button type="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render combined: primary large fluid 1`] = `"<button class="btn btn--primary btn--large btn--fluid">Combined</button>"`;
+exports[`EvoButton SSR > should render combined: primary large fluid 1`] = `"<button type="button" class="btn btn--primary btn--large btn--fluid">Combined</button>"`;
 
-exports[`EvoButton SSR > should render defaults 1`] = `"<button class="btn btn--secondary">Default Button</button>"`;
+exports[`EvoButton SSR > should render defaults 1`] = `"<button type="button" class="btn btn--secondary">Default Button</button>"`;
 
-exports[`EvoButton SSR > should render destructive primary large 1`] = `"<button class="btn btn--primary btn--large btn--destructive">Delete</button>"`;
+exports[`EvoButton SSR > should render destructive primary large 1`] = `"<button type="button" class="btn btn--primary btn--large btn--destructive">Delete</button>"`;
 
 exports[`EvoButton SSR > should render disabled link without href 1`] = `"<a class="fake-btn fake-btn--secondary">Disabled Link</a>"`;
 
 exports[`EvoButton SSR > should render fake version (anchor) 1`] = `"<a aria-label="fake button" class="fake-btn fake-btn--primary fake-btn--large" href="https://ebay.com">Link Button</a>"`;
 
-exports[`EvoButton SSR > should render form variant with expand 1`] = `"<button class="btn btn--form"><span class="btn__cell"><span class="btn__text">Form Expand</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-down-16"></use></svg></span></button>"`;
+exports[`EvoButton SSR > should render form variant with expand 1`] = `"<button type="button" class="btn btn--form"><span class="btn__cell"><span class="btn__text">Form Expand</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-down-16"></use></svg></span></button>"`;
 
-exports[`EvoButton SSR > should render large fixed-height button 1`] = `"<button class="btn btn--secondary btn--large btn--large-fixed-height">Large Fixed Height</button>"`;
+exports[`EvoButton SSR > should render large fixed-height button 1`] = `"<button type="button" class="btn btn--secondary btn--large btn--large-fixed-height">Large Fixed Height</button>"`;
 
-exports[`EvoButton SSR > should render large truncated button 1`] = `"<button class="btn btn--secondary btn--large btn--truncated">Large Truncated</button>"`;
+exports[`EvoButton SSR > should render large truncated button 1`] = `"<button type="button" class="btn btn--secondary btn--large btn--truncated">Large Truncated</button>"`;
 
-exports[`EvoButton SSR > should render with ButtonCell 1`] = `"<button class="btn btn--secondary"><span class="btn__cell" style="justify-content:space-between"><span>Left</span><span>Right</span></span></button>"`;
+exports[`EvoButton SSR > should render with ButtonCell 1`] = `"<button type="button" class="btn btn--secondary"><span class="btn__cell" style="justify-content:space-between"><span>Left</span><span>Right</span></span></button>"`;
 
-exports[`EvoButton SSR > should render with aria-label 1`] = `"<button aria-label="Submit form" class="btn btn--secondary">Submit</button>"`;
+exports[`EvoButton SSR > should render with aria-label 1`] = `"<button type="button" aria-label="Submit form" class="btn btn--secondary">Submit</button>"`;
 
 exports[`EvoButton SSR > should render with custom \`as\` component 1`] = `"<a data-custom-link="true" href="/home" class="fake-btn fake-btn--primary">Custom Link</a>"`;
 
-exports[`EvoButton SSR > should render with custom className 1`] = `"<button class="btn custom-class btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render with custom className 1`] = `"<button type="button" class="btn custom-class btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render with data attributes 1`] = `"<button data-testid="button" class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render with data attributes 1`] = `"<button type="button" data-testid="button" class="btn btn--secondary">Button</button>"`;
 
-exports[`EvoButton SSR > should render with id override 1`] = `"<button id="test" class="btn btn--secondary">Button</button>"`;
+exports[`EvoButton SSR > should render with id override 1`] = `"<button type="button" id="test" class="btn btn--secondary">Button</button>"`;
 
 exports[`EvoButton SSR > should render with type override 1`] = `"<button type="submit" class="btn btn--secondary">Submit</button>"`;
diff --git a/packages/evo-react/src/button/test/test.browser.tsx b/packages/evo-react/src/button/test/test.browser.tsx
index e1c426b16c1..64c04378711 100644
--- a/packages/evo-react/src/button/test/test.browser.tsx
+++ b/packages/evo-react/src/button/test/test.browser.tsx
@@ -17,6 +17,22 @@ describe("evo-button", () => {
   });
 
   describe("given button is enabled", () => {
+    it("defaults to type=button", async () => {
+      const screen = await render(<EvoButton>Button</EvoButton>);
+
+      await expect
+        .element(screen.getByRole("button"))
+        .toHaveAttribute("type", "button");
+    });
+
+    it("supports an explicit button type", async () => {
+      const screen = await render(<EvoButton type="submit">Submit</EvoButton>);
+
+      await expect
+        .element(screen.getByRole("button"))
+        .toHaveAttribute("type", "submit");
+    });
+
     it("emits click event when clicked", async () => {
       const onClick = vi.fn();
       const screen = await render(
diff --git a/packages/evo-react/src/confirm-dialog/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/confirm-dialog/test/__snapshots__/test.server.tsx.snap
index 1333073bce5..b542ba17f74 100644
--- a/packages/evo-react/src/confirm-dialog/test/__snapshots__/test.server.tsx.snap
+++ b/packages/evo-react/src/confirm-dialog/test/__snapshots__/test.server.tsx.snap
@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`EvoConfirmDialog SSR > renders default (closed) controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="closerequest" aria-labelledby="_R_0_" class="dialog dialog--narrow dialog--close"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Delete Address?</h2></div><div id="_R_0H1_" class="dialog__main"><p>You will permanently lose this address.</p></div><div class="dialog__footer"><button class="btn btn--secondary">Cancel</button><button autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">Delete</button></div></dialog>"`;
+exports[`EvoConfirmDialog SSR > renders default (closed) controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="closerequest" aria-labelledby="_R_0_" class="dialog dialog--narrow dialog--close"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Delete Address?</h2></div><div id="_R_0H1_" class="dialog__main"><p>You will permanently lose this address.</p></div><div class="dialog__footer"><button type="button" class="btn btn--secondary">Cancel</button><button type="button" autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">Delete</button></div></dialog>"`;
 
-exports[`EvoConfirmDialog SSR > renders open controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="closerequest" aria-labelledby="_R_0_" class="dialog dialog--narrow"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Delete Address?</h2></div><div id="_R_0H1_" class="dialog__main"><p>You will permanently lose this address.</p></div><div class="dialog__footer"><button class="btn btn--secondary">Cancel</button><button autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">Delete</button></div></dialog>"`;
+exports[`EvoConfirmDialog SSR > renders open controlled state 1`] = `"<dialog role="alertdialog" aria-modal="true" closedby="closerequest" aria-labelledby="_R_0_" class="dialog dialog--narrow"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Delete Address?</h2></div><div id="_R_0H1_" class="dialog__main"><p>You will permanently lose this address.</p></div><div class="dialog__footer"><button type="button" class="btn btn--secondary">Cancel</button><button type="button" autofocus="" aria-describedby="_R_0H1_" class="btn btn--primary">Delete</button></div></dialog>"`;
diff --git a/packages/evo-react/src/dialog/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/dialog/test/__snapshots__/test.server.tsx.snap
index e72fea0c01b..99af598f20f 100644
--- a/packages/evo-react/src/dialog/test/__snapshots__/test.server.tsx.snap
+++ b/packages/evo-react/src/dialog/test/__snapshots__/test.server.tsx.snap
@@ -8,6 +8,6 @@ exports[`EvoDialog SSR > renders size=wide 1`] = `"<dialog closedby="any" aria-l
 
 exports[`EvoDialog SSR > renders the default controlled state 1`] = `"<dialog closedby="any" aria-labelledby="_R_0_" class="dialog dialog--close"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Dialog Title</h2><button type="button" aria-label="Close Dialog" class="dialog__close icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-close-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-close-16"><path d="M2.293 2.293a1 1 0 0 1 1.414 0L8 6.586l4.293-4.293a1 1 0 1 1 1.414 1.414L9.414 8l4.293 4.293a1 1 0 0 1-1.414 1.414L8 9.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414Z"/></symbol></defs></svg></button></div><div class="dialog__main"><p>Dialog content</p></div></dialog>"`;
 
-exports[`EvoDialog SSR > renders the expressive composition 1`] = `"<dialog closedby="any" aria-labelledby="_R_0_" class="dialog dialog--expressive"><div class="dialog__image" style="background-image:url(https://example.com/banner.jpg);background-position:top"></div><div class="dialog__header"><button type="button" aria-label="Back" class="dialog__prev icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-left-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-chevron-left-16"><path d="M3.293 8.708a1 1 0 0 1 0-1.415l6-6a1 1 0 0 1 1.414 1.414L5.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6Z"/></symbol></defs></svg></button><h2 id="_R_0_" class="dialog__title">Dialog Title</h2><button type="button" aria-label="Close Dialog" class="dialog__close icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-close-16"></use></svg></button></div><div class="dialog__main">Dialog content</div><div class="dialog__footer"><button class="btn btn--secondary">Done</button></div></dialog>"`;
+exports[`EvoDialog SSR > renders the expressive composition 1`] = `"<dialog closedby="any" aria-labelledby="_R_0_" class="dialog dialog--expressive"><div class="dialog__image" style="background-image:url(https://example.com/banner.jpg);background-position:top"></div><div class="dialog__header"><button type="button" aria-label="Back" class="dialog__prev icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-chevron-left-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-chevron-left-16"><path d="M3.293 8.708a1 1 0 0 1 0-1.415l6-6a1 1 0 0 1 1.414 1.414L5.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6Z"/></symbol></defs></svg></button><h2 id="_R_0_" class="dialog__title">Dialog Title</h2><button type="button" aria-label="Close Dialog" class="dialog__close icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-close-16"></use></svg></button></div><div class="dialog__main">Dialog content</div><div class="dialog__footer"><button type="button" class="btn btn--secondary">Done</button></div></dialog>"`;
 
 exports[`EvoDialog SSR > renders the open controlled state 1`] = `"<dialog closedby="any" aria-labelledby="_R_0_" class="dialog"><div class="dialog__header"><h2 id="_R_0_" class="dialog__title">Dialog Title</h2><button type="button" aria-label="Close Dialog" class="dialog__close icon-btn"><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-close-16"></use></svg></button></div><div class="dialog__main"><p>Dialog content</p></div></dialog>"`;
diff --git a/packages/evo-react/src/infotip/infotip.stories.tsx b/packages/evo-react/src/infotip/infotip.stories.tsx
index f81753542a9..79d1b426781 100644
--- a/packages/evo-react/src/infotip/infotip.stories.tsx
+++ b/packages/evo-react/src/infotip/infotip.stories.tsx
@@ -92,18 +92,16 @@ type Story = StoryObj<typeof EvoInfotip>;
 
 export const Default: Story = {
   render: (args) => (
-    <div style={{ margin: 200 }}>
-      <EvoInfotip {...args}>
-        <EvoInfotipHeading>Heading</EvoInfotipHeading>
-        <p>Content</p>
-      </EvoInfotip>
-    </div>
+    <EvoInfotip {...args}>
+      <EvoInfotipHeading>Heading</EvoInfotipHeading>
+      <p>Content</p>
+    </EvoInfotip>
   ),
 };
 
 export const WrappedParagraph: Story = {
   render: (args) => (
-    <div style={{ margin: 200, width: 240 }}>
+    <div style={{ width: 240 }}>
       <p>
         This paragraph wraps around the infotip button{" "}
         <EvoInfotip {...args} defaultOpen placement="bottom">
diff --git a/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap
index 173544787a3..70fa580cea8 100644
--- a/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap
+++ b/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EvoMenu SSR > applies prefixed menu classes 1`] = `"<span class="menu-button__menu menu-button__menu--reverse menu-button__menu--fixed menu-button__menu--fix-width"><div aria-label="Actions" role="menu" tabindex="-1" class="menu-button__items"><div role="menuitem" tabindex="-1" class="menu-button__item"><span>Open</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div></span>"`;
 
-exports[`EvoMenu SSR > renders command items, a badge, a separator, and a footer 1`] = `"<span class="menu"><div aria-label="Actions" role="menu" tabindex="-1" class="menu__items"><div role="menuitem" tabindex="-1" class="menu__item"><span>Messages<span class="badge badge--circle" aria-label="5 unread messages">5</span></span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-tick-16"><path fill-rule="evenodd" d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z" clip-rule="evenodd"/></symbol></defs></svg></div><hr class="menu__separator"/><div role="menuitem" aria-disabled="true" tabindex="-1" class="menu__item"><span>Disabled</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div><div class="menu__footer"><button class="btn btn--secondary">Apply</button></div></span>"`;
+exports[`EvoMenu SSR > renders command items, a badge, a separator, and a footer 1`] = `"<span class="menu"><div aria-label="Actions" role="menu" tabindex="-1" class="menu__items"><div role="menuitem" tabindex="-1" class="menu__item"><span>Messages<span class="badge badge--circle" aria-label="5 unread messages">5</span></span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-tick-16"><path fill-rule="evenodd" d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z" clip-rule="evenodd"/></symbol></defs></svg></div><hr class="menu__separator"/><div role="menuitem" aria-disabled="true" tabindex="-1" class="menu__item"><span>Disabled</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div><div class="menu__footer"><button type="button" class="btn btn--secondary">Apply</button></div></span>"`;
 
 exports[`EvoMenu SSR > renders selected radio and checkbox items 1`] = `"<span class="menu"><div aria-label="Preferences" role="menu" tabindex="-1" class="menu__items"><div role="menuitemradio" data-value="price" aria-checked="true" tabindex="-1" class="menu__item"><span>Price</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemradio" data-value="distance" aria-checked="false" tabindex="-1" class="menu__item"><span>Distance</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemcheckbox" data-value="shipping" aria-checked="true" tabindex="-1" class="menu__item"><span>Shipping</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemcheckbox" data-value="returns" aria-checked="false" tabindex="-1" class="menu__item"><span>Returns</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div></span>"`;
 
diff --git a/packages/evo-react/src/tooltip/README.md b/packages/evo-react/src/tooltip/README.md
new file mode 100644
index 00000000000..7b3e75557c0
--- /dev/null
+++ b/packages/evo-react/src/tooltip/README.md
@@ -0,0 +1,5 @@
+# EvoTooltip
+
+## Documentation
+
+[Storybook](https://opensource.ebay.com/evo-web/react/?path=/docs/notices-tips-evo-tooltip--documentation)
diff --git a/packages/evo-react/src/tooltip/context.tsx b/packages/evo-react/src/tooltip/context.tsx
new file mode 100644
index 00000000000..ee4232e4bbf
--- /dev/null
+++ b/packages/evo-react/src/tooltip/context.tsx
@@ -0,0 +1,64 @@
+import { createContext, use, useMemo } from "react";
+import type { CSSProperties, ReactNode, RefObject } from "react";
+
+export type TooltipContextValue = {
+  open: boolean;
+  tooltipId: string;
+  setReference: (node: Element | null) => void;
+  setFloating: (node: HTMLElement | null) => void;
+  arrowRef: RefObject<HTMLElement | null>;
+  floatingStyles: CSSProperties;
+  arrowStyles: CSSProperties;
+};
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+export function useTooltipContext() {
+  const value = use(TooltipContext);
+
+  if (!value) {
+    throw new Error(
+      "EvoTooltip sub-components must be used within an EvoTooltip component",
+    );
+  }
+
+  return value;
+}
+
+type TooltipProviderProps = TooltipContextValue & {
+  children: ReactNode;
+};
+
+export function TooltipProvider({
+  open,
+  tooltipId,
+  setReference,
+  setFloating,
+  arrowRef,
+  floatingStyles,
+  arrowStyles,
+  children,
+}: TooltipProviderProps) {
+  const value = useMemo(
+    () => ({
+      open,
+      tooltipId,
+      setReference,
+      setFloating,
+      arrowRef,
+      floatingStyles,
+      arrowStyles,
+    }),
+    [
+      open,
+      tooltipId,
+      setReference,
+      setFloating,
+      arrowRef,
+      floatingStyles,
+      arrowStyles,
+    ],
+  );
+
+  return <TooltipContext value={value}>{children}</TooltipContext>;
+}
diff --git a/packages/evo-react/src/tooltip/index.ts b/packages/evo-react/src/tooltip/index.ts
new file mode 100644
index 00000000000..a78e2e0e1d7
--- /dev/null
+++ b/packages/evo-react/src/tooltip/index.ts
@@ -0,0 +1,11 @@
+export { EvoTooltip } from "./tooltip";
+export { EvoTooltipHost } from "./tooltip-host";
+export { EvoTooltipContent } from "./tooltip-content";
+export { EvoTooltipHeading } from "./tooltip-heading";
+export type {
+  EvoTooltipProps,
+  EvoTooltipHostProps,
+  EvoTooltipContentProps,
+  EvoTooltipHeadingProps,
+  TooltipPlacement,
+} from "./types";
diff --git a/packages/evo-react/src/tooltip/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/tooltip/test/__snapshots__/test.server.tsx.snap
new file mode 100644
index 00000000000..f751e96dbb2
--- /dev/null
+++ b/packages/evo-react/src/tooltip/test/__snapshots__/test.server.tsx.snap
@@ -0,0 +1,31 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EvoTooltip SSR > renders a controlled open state 1`] = `"<span class="tooltip tooltip--expanded"><button type="button" aria-expanded="true" aria-describedby="_R_0_" class="btn tooltip__host btn--secondary">Information</button><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0;visibility:hidden" role="tooltip" tabindex="-1"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Additional information</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders an uncontrolled initially open state 1`] = `"<span class="tooltip tooltip--expanded"><button type="button" aria-expanded="true" aria-describedby="_R_0_" class="btn tooltip__host btn--secondary">Information</button><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0;visibility:hidden" role="tooltip" tabindex="-1"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Additional information</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders the default closed state 1`] = `"<span class="tooltip"><button type="button" aria-expanded="false" aria-describedby="_R_0_" class="btn tooltip__host btn--secondary">Information</button><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Additional information</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=bottom 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=bottom-end 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=bottom-start 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=left 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=left-end 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=left-start 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=right 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=right-end 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=right-start 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=top 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=top-end 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
+
+exports[`EvoTooltip SSR > renders with placement=top-start 1`] = `"<span class="tooltip"><a href="https://www.ebay.com" class="tooltip__host" aria-expanded="false" aria-describedby="_R_0_">View options</a><span id="_R_0_" class="tooltip__overlay" style="position:absolute;left:0;top:0" role="tooltip"><span class="tooltip__pointer"></span><span class="tooltip__mask"><span class="tooltip__cell"><span class="tooltip__content">Available options</span></span></span></span></span>"`;
diff --git a/packages/evo-react/src/tooltip/test/test.browser.tsx b/packages/evo-react/src/tooltip/test/test.browser.tsx
new file mode 100644
index 00000000000..58d69f3bed2
--- /dev/null
+++ b/packages/evo-react/src/tooltip/test/test.browser.tsx
@@ -0,0 +1,215 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { EvoButton } from "../../button/button";
+import type { AnchorButtonProps } from "../../button/types";
+import { EvoInput } from "../../input";
+import { EvoTooltip } from "../tooltip";
+import { EvoTooltipContent } from "../tooltip-content";
+import { EvoTooltipHeading } from "../tooltip-heading";
+import { EvoTooltipHost } from "../tooltip-host";
+
+function DefaultTooltip() {
+  return (
+    <EvoTooltip>
+      <EvoTooltipHost>Information</EvoTooltipHost>
+      <EvoTooltipContent>Additional information</EvoTooltipContent>
+    </EvoTooltip>
+  );
+}
+
+describe("evo-tooltip", () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  afterEach(() => {
+    user.cleanup();
+  });
+
+  it("renders an accessible host and tooltip relationship", async () => {
+    const screen = await render(<DefaultTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await expect.element(host).toHaveClass("tooltip__host");
+    await expect.element(host).toHaveAttribute("type", "button");
+
+    await user.tab();
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+
+    const tooltip = screen.getByRole("tooltip");
+    await expect.element(tooltip).toHaveTextContent("Additional information");
+    await expect
+      .element(host)
+      .toHaveAttribute("aria-describedby", tooltip.element().id);
+    expect(host.element().closest(".tooltip")).not.toBeNull();
+  });
+
+  it("opens on hover and closes after the hover delay", async () => {
+    const screen = await render(<DefaultTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await user.hover(host);
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+
+    await user.unhover(host);
+    await vi.waitFor(async () => {
+      await expect.element(host).toHaveAttribute("aria-expanded", "false");
+    });
+  });
+
+  it("opens on focus and closes when focus leaves", async () => {
+    const screen = await render(<DefaultTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await user.tab();
+    await expect.element(host).toHaveFocus();
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+
+    await user.tab();
+    await expect.element(host).not.toHaveFocus();
+    await expect.element(host).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("opens when a nested input host receives focus", async () => {
+    const screen = await render(
+      <EvoTooltip>
+        <EvoTooltipHost
+          as={EvoInput}
+          aria-label="Email address"
+          placeholder="Email address"
+        />
+        <EvoTooltipContent>
+          Please choose the email address you use the most.
+        </EvoTooltipContent>
+      </EvoTooltip>,
+    );
+    const input = screen.getByPlaceholder("Email address");
+    const tooltip =
+      screen.container.querySelector<HTMLElement>('[role="tooltip"]')!;
+
+    input.element().focus();
+
+    await expect.element(input).toHaveFocus();
+    await expect.element(input).toHaveAttribute("aria-expanded", "true");
+    expect(getComputedStyle(tooltip).display).not.toBe("none");
+  });
+
+  it("closes a hover-opened tooltip when Escape is pressed", async () => {
+    const screen = await render(<DefaultTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await user.hover(host);
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+
+    await user.keyboard("{Escape}");
+    await expect.element(host).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("closes a focus-opened tooltip when Escape is pressed", async () => {
+    const screen = await render(<DefaultTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await user.tab();
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+
+    await user.keyboard("{Escape}");
+    await expect.element(host).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("supports a controlled open state", async () => {
+    const onOpenChange = vi.fn();
+
+    function ControlledTooltip() {
+      const [open, setOpen] = useState(false);
+      return (
+        <EvoTooltip
+          open={open}
+          onOpenChange={(nextOpen) => {
+            onOpenChange(nextOpen);
+            setOpen(nextOpen);
+          }}
+        >
+          <EvoTooltipHost>Information</EvoTooltipHost>
+          <EvoTooltipContent>Additional information</EvoTooltipContent>
+        </EvoTooltip>
+      );
+    }
+
+    const screen = await render(<ControlledTooltip />);
+    const host = screen.getByRole("button", { name: "Information" });
+
+    await user.tab();
+    await expect.element(host).toHaveAttribute("aria-expanded", "true");
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
+
+    await user.tab();
+    await expect.element(host).toHaveAttribute("aria-expanded", "false");
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("supports a custom host that configures its own as prop", async () => {
+    type CustomLinkProps = ComponentProps<"a"> & { to: string };
+
+    function CustomLink({ to, ref, children, ...rest }: CustomLinkProps) {
+      return (
+        <a {...rest} ref={ref} href={to} data-custom-link="true">
+          {children}
+        </a>
+      );
+    }
+
+    type CustomEvoButtonProps = Omit<AnchorButtonProps, "as">;
+
+    function CustomEvoButton({ ref, href, ...rest }: CustomEvoButtonProps) {
+      return (
+        <EvoButton
+          {...rest}
+          ref={ref}
+          href={href}
+          as={({ href: destination, ...linkProps }) => (
+            <CustomLink {...linkProps} to={destination ?? ""} />
+          )}
+        />
+      );
+    }
+
+    const screen = await render(
+      <EvoTooltip>
+        <EvoTooltipHost
+          as={CustomEvoButton}
+          href="https://www.ebay.com"
+          priority="secondary"
+        >
+          View options
+        </EvoTooltipHost>
+        <EvoTooltipContent>Available options</EvoTooltipContent>
+      </EvoTooltip>,
+    );
+    const host = screen.getByRole("link", { name: "View options" });
+
+    await expect.element(host).toHaveAttribute("data-custom-link", "true");
+    await expect.element(host).toHaveClass("fake-btn");
+    await expect.element(host).toHaveClass("tooltip__host");
+  });
+
+  it("renders a custom heading element", async () => {
+    const screen = await render(
+      <EvoTooltip defaultOpen>
+        <EvoTooltipHost>Information</EvoTooltipHost>
+        <EvoTooltipContent>
+          <EvoTooltipHeading as="h2">Shipping information</EvoTooltipHeading>
+          Ships tomorrow
+        </EvoTooltipContent>
+      </EvoTooltip>,
+    );
+
+    await expect
+      .element(screen.getByRole("heading", { level: 2 }))
+      .toHaveClass("tooltip__heading");
+  });
+});
diff --git a/packages/evo-react/src/tooltip/test/test.server.tsx b/packages/evo-react/src/tooltip/test/test.server.tsx
new file mode 100644
index 00000000000..0ac1b1bd1ff
--- /dev/null
+++ b/packages/evo-react/src/tooltip/test/test.server.tsx
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { EvoTooltip } from "../tooltip";
+import { EvoTooltipContent } from "../tooltip-content";
+import { EvoTooltipHeading } from "../tooltip-heading";
+import { EvoTooltipHost } from "../tooltip-host";
+import type { TooltipPlacement } from "../types";
+
+function DefaultTooltip({
+  open,
+  defaultOpen,
+}: {
+  open?: boolean;
+  defaultOpen?: boolean;
+}) {
+  return (
+    <EvoTooltip open={open} defaultOpen={defaultOpen}>
+      <EvoTooltipHost>Information</EvoTooltipHost>
+      <EvoTooltipContent>Additional information</EvoTooltipContent>
+    </EvoTooltip>
+  );
+}
+
+describe("EvoTooltip SSR", () => {
+  it("renders the default closed state", () => {
+    expect(renderToString(<DefaultTooltip />)).toMatchSnapshot();
+  });
+
+  it("renders a controlled open state", () => {
+    expect(renderToString(<DefaultTooltip open />)).toMatchSnapshot();
+  });
+
+  it("renders an uncontrolled initially open state", () => {
+    expect(renderToString(<DefaultTooltip defaultOpen />)).toMatchSnapshot();
+  });
+
+  it.each<TooltipPlacement>([
+    "top",
+    "top-start",
+    "top-end",
+    "right",
+    "right-start",
+    "right-end",
+    "bottom",
+    "bottom-start",
+    "bottom-end",
+    "left",
+    "left-start",
+    "left-end",
+  ])("renders with placement=%s", (placement) => {
+    expect(
+      renderToString(
+        <EvoTooltip placement={placement}>
+          <EvoTooltipHost as="a" href="https://www.ebay.com">
+            View options
+          </EvoTooltipHost>
+          <EvoTooltipContent>Available options</EvoTooltipContent>
+        </EvoTooltip>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("renders custom root, host, content, and heading attributes", () => {
+    const html = renderToString(
+      <EvoTooltip className="custom-tooltip" data-testid="tooltip-root">
+        <EvoTooltipHost className="custom-host" type="button">
+          Information
+        </EvoTooltipHost>
+        <EvoTooltipContent className="custom-content">
+          <EvoTooltipHeading as="h2" className="custom-heading">
+            Heading
+          </EvoTooltipHeading>
+          Content
+        </EvoTooltipContent>
+      </EvoTooltip>,
+    );
+
+    expect(html).toContain('class="tooltip custom-tooltip"');
+    expect(html).toContain('data-testid="tooltip-root"');
+    expect(html).toContain("tooltip__host custom-host");
+    expect(html).toContain('class="tooltip__overlay custom-content"');
+    expect(html).toContain('class="tooltip__heading custom-heading"');
+  });
+});
diff --git a/packages/evo-react/src/tooltip/tooltip-content.tsx b/packages/evo-react/src/tooltip/tooltip-content.tsx
new file mode 100644
index 00000000000..324184b9e10
--- /dev/null
+++ b/packages/evo-react/src/tooltip/tooltip-content.tsx
@@ -0,0 +1,41 @@
+import classNames from "classnames";
+import { useTooltipContext } from "./context";
+import type { EvoTooltipContentProps } from "./types";
+import { useRefTee } from "../utils/use-ref-tee";
+
+export function EvoTooltipContent({
+  className,
+  style,
+  ref,
+  children,
+  ...rest
+}: EvoTooltipContentProps) {
+  const {
+    open,
+    tooltipId,
+    setFloating,
+    arrowRef,
+    floatingStyles,
+    arrowStyles,
+  } = useTooltipContext();
+  const [floatingRef] = useRefTee([setFloating, ref], null);
+
+  return (
+    <span
+      {...rest}
+      id={tooltipId}
+      ref={floatingRef}
+      className={classNames("tooltip__overlay", className)}
+      style={{ ...style, ...floatingStyles }}
+      role="tooltip"
+      tabIndex={open ? -1 : undefined}
+    >
+      <span ref={arrowRef} className="tooltip__pointer" style={arrowStyles} />
+      <span className="tooltip__mask">
+        <span className="tooltip__cell">
+          <span className="tooltip__content">{children}</span>
+        </span>
+      </span>
+    </span>
+  );
+}
diff --git a/packages/evo-react/src/tooltip/tooltip-heading.tsx b/packages/evo-react/src/tooltip/tooltip-heading.tsx
new file mode 100644
index 00000000000..cb7f2271be9
--- /dev/null
+++ b/packages/evo-react/src/tooltip/tooltip-heading.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import type { ElementType } from "react";
+import type { EvoTooltipHeadingProps } from "./types";
+
+export function EvoTooltipHeading<T extends ElementType = "span">({
+  as,
+  className,
+  children,
+  ...rest
+}: EvoTooltipHeadingProps<T>) {
+  const Component = (as ?? "span") as ElementType;
+
+  return (
+    <Component {...rest} className={classNames("tooltip__heading", className)}>
+      {children}
+    </Component>
+  );
+}
diff --git a/packages/evo-react/src/tooltip/tooltip-host.tsx b/packages/evo-react/src/tooltip/tooltip-host.tsx
new file mode 100644
index 00000000000..d9e2edbdd68
--- /dev/null
+++ b/packages/evo-react/src/tooltip/tooltip-host.tsx
@@ -0,0 +1,30 @@
+import classNames from "classnames";
+import type { ElementType } from "react";
+import { useTooltipContext } from "./context";
+import { EvoButton } from "../button";
+import type { EvoTooltipHostProps } from "./types";
+import { useRefTee } from "../utils/use-ref-tee";
+
+export function EvoTooltipHost<T extends ElementType = typeof EvoButton>({
+  as,
+  children,
+  className,
+  ref,
+  ...rest
+}: EvoTooltipHostProps<T>) {
+  const { open, tooltipId, setReference } = useTooltipContext();
+  const [referenceRef] = useRefTee([setReference, ref], null);
+  const Component = (as ?? EvoButton) as ElementType;
+
+  return (
+    <Component
+      {...rest}
+      ref={referenceRef}
+      className={classNames("tooltip__host", className)}
+      aria-expanded={open}
+      aria-describedby={tooltipId}
+    >
+      {children}
+    </Component>
+  );
+}
diff --git a/packages/evo-react/src/tooltip/tooltip.stories.tsx b/packages/evo-react/src/tooltip/tooltip.stories.tsx
new file mode 100644
index 00000000000..a501d1a6130
--- /dev/null
+++ b/packages/evo-react/src/tooltip/tooltip.stories.tsx
@@ -0,0 +1,206 @@
+import type { ComponentProps } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EvoButton } from "../button/button";
+import type { AnchorButtonProps } from "../button/types";
+import { EvoIconButton } from "../icon-button";
+import { EvoIconSettings24 } from "../icon/icons/settings-24";
+import { EvoTooltip } from "./tooltip";
+import { EvoTooltipContent } from "./tooltip-content";
+import { EvoTooltipHeading } from "./tooltip-heading";
+import { EvoTooltipHost } from "./tooltip-host";
+import type { TooltipPlacement } from "./types";
+
+const meta: Meta<typeof EvoTooltip> = {
+  title: "notices & tips/evo-tooltip",
+  component: EvoTooltip,
+  subcomponents: {
+    EvoTooltipHost,
+    EvoTooltipContent,
+    EvoTooltipHeading,
+  },
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A tooltip provides brief, supplementary information when its host is hovered or focused.
+
+## Usage
+
+\`\`\`tsx
+import {
+  EvoTooltip,
+  EvoTooltipContent,
+  EvoTooltipHost,
+} from "@evo-web/react/tooltip";
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    open: {
+      control: "boolean",
+    },
+    defaultOpen: {
+      control: "boolean",
+      table: { defaultValue: { summary: "false" } },
+    },
+    onOpenChange: {
+      action: "onOpenChange",
+      table: { category: "Events" },
+    },
+    placement: {
+      control: "select",
+      options: [
+        "top",
+        "top-start",
+        "top-end",
+        "right",
+        "right-start",
+        "right-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+      ],
+      table: { defaultValue: { summary: "bottom" } },
+    },
+    offset: {
+      control: "number",
+      table: { defaultValue: { summary: "8" } },
+    },
+    flip: {
+      control: "boolean",
+      table: { defaultValue: { summary: "true" } },
+    },
+    shift: {
+      control: "boolean",
+      table: { defaultValue: { summary: "true" } },
+    },
+    inline: {
+      control: "boolean",
+      table: { defaultValue: { summary: "true" } },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EvoTooltip>;
+
+export const Default: Story = {
+  render: (args) => (
+    <EvoTooltip {...args}>
+      <EvoTooltipHost>View options</EvoTooltipHost>
+      <EvoTooltipContent>
+        Use Access Key &apos;S&apos; to display settings.
+      </EvoTooltipContent>
+    </EvoTooltip>
+  ),
+};
+
+export const IconButtonHost: Story = {
+  render: (args) => (
+    <EvoTooltip {...args} placement="right">
+      <EvoTooltipHost as={EvoIconButton} a11yText="Settings">
+        <EvoIconSettings24 />
+      </EvoTooltipHost>
+      <EvoTooltipContent>Configure your settings</EvoTooltipContent>
+    </EvoTooltip>
+  ),
+};
+
+const placements: TooltipPlacement[] = [
+  "top-start",
+  "top",
+  "top-end",
+  "right-start",
+  "right",
+  "right-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end",
+  "left-start",
+  "left",
+  "left-end",
+];
+
+export const Placements: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gap: "4rem",
+        justifyItems: "center",
+      }}
+    >
+      {placements.map((placement) => (
+        <EvoTooltip
+          {...args}
+          key={placement}
+          placement={placement}
+          flip={false}
+        >
+          <EvoTooltipHost>{placement}</EvoTooltipHost>
+          <EvoTooltipContent>
+            <span style={{ display: "block" }}>
+              Tooltip content for <code>{placement}</code>
+            </span>
+            <span style={{ display: "block" }}>
+              Here we explicitly set <code>flip=false</code> for demonstration.
+              By default, the tooltip will not extend outside the window.
+            </span>
+          </EvoTooltipContent>
+        </EvoTooltip>
+      ))}
+    </div>
+  ),
+};
+
+type CustomLinkProps = ComponentProps<"a"> & {
+  to: string;
+};
+
+function CustomLink({ to, ref, children, ...rest }: CustomLinkProps) {
+  return (
+    <a {...rest} ref={ref} href={to} data-custom-link="true">
+      {children}
+    </a>
+  );
+}
+
+type CustomEvoButtonProps = Omit<AnchorButtonProps, "as">;
+
+function CustomEvoButton({ ref, href, ...rest }: CustomEvoButtonProps) {
+  return (
+    <EvoButton
+      {...rest}
+      ref={ref}
+      href={href}
+      as={({ href: destination, ...linkProps }) => (
+        <CustomLink {...linkProps} to={destination ?? ""} />
+      )}
+    />
+  );
+}
+
+export const CustomHost: Story = {
+  render: (args) => (
+    <EvoTooltip {...args}>
+      <EvoTooltipHost
+        as={CustomEvoButton}
+        href="https://www.ebay.com"
+        priority="secondary"
+      >
+        View options
+      </EvoTooltipHost>
+      <EvoTooltipContent>
+        <EvoTooltipHeading>Available options</EvoTooltipHeading>
+        Use this link to view available options.
+      </EvoTooltipContent>
+    </EvoTooltip>
+  ),
+};
diff --git a/packages/evo-react/src/tooltip/tooltip.tsx b/packages/evo-react/src/tooltip/tooltip.tsx
new file mode 100644
index 00000000000..ec553a3f213
--- /dev/null
+++ b/packages/evo-react/src/tooltip/tooltip.tsx
@@ -0,0 +1,143 @@
+import { useCallback, useId, useRef } from "react";
+import type { FocusEvent, MouseEvent } from "react";
+import classNames from "classnames";
+import { TooltipProvider } from "./context";
+import type { EvoTooltipProps } from "./types";
+import { useExpander } from "../utils/use-expander";
+import { useRefTee } from "../utils/use-ref-tee";
+import "@ebay/skin/tooltip.mjs";
+
+export function EvoTooltip({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom",
+  offset = 8,
+  flip = true,
+  shift = true,
+  inline = true,
+  className,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ref,
+  ...rest
+}: EvoTooltipProps) {
+  const tooltipId = useId();
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const expander = useExpander({
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement,
+    strategy: "absolute",
+    offset,
+    flip,
+    shift,
+    inline,
+  });
+
+  const clearHoverTimeout = useCallback(() => {
+    if (hoverTimeoutRef.current !== null) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(
+    (event: MouseEvent<HTMLSpanElement>) => {
+      onMouseEnter?.(event);
+      clearHoverTimeout();
+      expander.setOpen(true);
+    },
+    [clearHoverTimeout, expander.setOpen, onMouseEnter],
+  );
+
+  const handleMouseLeave = useCallback(
+    (event: MouseEvent<HTMLSpanElement>) => {
+      onMouseLeave?.(event);
+      clearHoverTimeout();
+      hoverTimeoutRef.current = setTimeout(() => {
+        expander.setOpen(false);
+      }, 300);
+    },
+    [clearHoverTimeout, expander.setOpen, onMouseLeave],
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLSpanElement>) => {
+      onFocus?.(event);
+      clearHoverTimeout();
+      expander.setOpen(true);
+    },
+    [clearHoverTimeout, expander.setOpen, onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLSpanElement>) => {
+      onBlur?.(event);
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        clearHoverTimeout();
+        expander.setOpen(false);
+      }
+    },
+    [clearHoverTimeout, expander.setOpen, onBlur],
+  );
+
+  const [rootRef] = useRefTee(ref, null);
+  const lifecycleRef = useCallback(
+    (root: HTMLSpanElement | null) => {
+      rootRef(root);
+      if (!root) {
+        return;
+      }
+
+      const ownerDocument = root.ownerDocument;
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (expander.open && (event.key === "Escape" || event.key === "Esc")) {
+          clearHoverTimeout();
+          expander.setOpen(false);
+        }
+      };
+
+      ownerDocument.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        ownerDocument.removeEventListener("keydown", handleKeyDown);
+        clearHoverTimeout();
+        rootRef(null);
+      };
+    },
+    [clearHoverTimeout, expander.open, expander.setOpen, rootRef],
+  );
+
+  return (
+    <TooltipProvider
+      open={expander.open}
+      tooltipId={tooltipId}
+      setReference={expander.refs.setReference}
+      setFloating={expander.refs.setFloating}
+      arrowRef={expander.refs.arrow}
+      floatingStyles={expander.floatingStyles}
+      arrowStyles={expander.arrowStyles}
+    >
+      <span
+        {...rest}
+        ref={lifecycleRef}
+        className={classNames(
+          "tooltip",
+          expander.open && "tooltip--expanded",
+          className,
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      >
+        {children}
+      </span>
+    </TooltipProvider>
+  );
+}
diff --git a/packages/evo-react/src/tooltip/types.ts b/packages/evo-react/src/tooltip/types.ts
new file mode 100644
index 00000000000..f4796b4fda9
--- /dev/null
+++ b/packages/evo-react/src/tooltip/types.ts
@@ -0,0 +1,78 @@
+import type {
+  ComponentProps,
+  ComponentPropsWithRef,
+  ElementType,
+  ReactNode,
+} from "react";
+import type { EvoButton } from "../button";
+
+export type TooltipPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end";
+
+export type EvoTooltipProps = ComponentProps<"span"> & {
+  /** Controlled open state. When provided, the consumer manages it via `onOpenChange`. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. Ignored when `open` is provided. */
+  defaultOpen?: boolean;
+  /** Callback fired when the tooltip requests to change its open state. */
+  onOpenChange?: (open: boolean) => void;
+  /** Position of the overlay relative to the host. Defaults to `bottom`. */
+  placement?: TooltipPlacement;
+  /** Distance between the host and overlay in pixels. Defaults to `8`. */
+  offset?: number;
+  /** Flips the tooltip when there is insufficient space. Defaults to `true`. */
+  flip?: boolean;
+  /** Shifts the tooltip to keep it within the viewport. Defaults to `true`. */
+  shift?: boolean;
+  /** Uses inline positioning for hosts that wrap across multiple lines. Defaults to `true`. */
+  inline?: boolean;
+};
+
+type TooltipHostOwnProps<T extends ElementType> = {
+  /** Element or component rendered as the tooltip host. Defaults to `EvoButton`. */
+  as?: T;
+  /** Content rendered inside the tooltip host. */
+  children?: ReactNode;
+  /** Additional class name merged with the Skin host class. */
+  className?: string;
+  /** Ref forwarded to the rendered host. Custom components must pass it to their DOM element. */
+  ref?: ComponentPropsWithRef<T>["ref"];
+};
+
+export type EvoTooltipHostProps<T extends ElementType = typeof EvoButton> =
+  TooltipHostOwnProps<T> &
+    Omit<
+      ComponentPropsWithRef<T>,
+      keyof TooltipHostOwnProps<T> | "aria-describedby" | "aria-expanded"
+    >;
+
+export type EvoTooltipContentProps = Omit<
+  ComponentProps<"span">,
+  "id" | "role" | "tabIndex"
+>;
+
+type TooltipHeadingOwnProps<T extends ElementType> = {
+  /** Element or component used for the heading. Defaults to `span`. */
+  as?: T;
+  /** Content rendered inside the tooltip heading. */
+  children?: ReactNode;
+  /** Additional class name merged with the Skin heading class. */
+  className?: string;
+  /** Ref forwarded to the rendered heading. */
+  ref?: ComponentPropsWithRef<T>["ref"];
+};
+
+export type EvoTooltipHeadingProps<T extends ElementType = "span"> =
+  TooltipHeadingOwnProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof TooltipHeadingOwnProps<T>>;
diff --git a/packages/evo-react/src/utils/use-ref-tee.ts b/packages/evo-react/src/utils/use-ref-tee.ts
index 36956fae62e..520357ce722 100644
--- a/packages/evo-react/src/utils/use-ref-tee.ts
+++ b/packages/evo-react/src/utils/use-ref-tee.ts
@@ -1,23 +1,25 @@
 import { useCallback, useRef } from "react";
 import type { Ref } from "react";
 
-export function useRefTee<T>(ref?: Ref<T>, initialValue?: T) {
+type RefTeeInput<T> = Ref<T> | readonly (Ref<T> | undefined)[];
+
+export function useRefTee<T>(ref?: RefTeeInput<T>, initialValue?: T) {
   const internalRef = useRef(initialValue);
+  const refs: readonly (Ref<T> | undefined)[] = Array.isArray(ref)
+    ? ref
+    : [ref as Ref<T> | undefined];
 
-  const teeRef = useCallback(
-    (node: T) => {
-      internalRef.current = node;
+  const teeRef = useCallback((node: T) => {
+    internalRef.current = node;
 
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
+    refs.forEach((currentRef) => {
+      if (typeof currentRef === "function") {
+        currentRef(node);
+      } else if (currentRef) {
+        currentRef.current = node;
       }
-    },
-    [ref],
-  );
+    });
+  }, refs);
 
   return [teeRef, internalRef] as const;
 }
diff --git a/packages/evo-storybook-addon-theme/README.md b/packages/evo-storybook-addon-theme/README.md
index f141363fba5..994a2e9ab83 100644
--- a/packages/evo-storybook-addon-theme/README.md
+++ b/packages/evo-storybook-addon-theme/README.md
@@ -10,4 +10,4 @@ export default {
 };
 ```
 
-The addon provides the Evo Web manager theme and logo, the color-scheme toolbar, Evo token overrides for explicit selections, and live system-theme updates.
+The addon provides the Evo Web manager theme and logo, the color-scheme toolbar, Evo token overrides for explicit selections, live system-theme updates, and the shared preview layout. Stories are vertically centered by default while retaining their natural horizontal alignment; individual stories can override Storybook's `layout` parameter when needed.
diff --git a/packages/evo-marko/.storybook/custom-styles.css b/packages/evo-storybook-addon-theme/src/layout.scss
similarity index 83%
rename from packages/evo-marko/.storybook/custom-styles.css
rename to packages/evo-storybook-addon-theme/src/layout.scss
index 3ebc9fa5d0e..1d72b32c4e9 100644
--- a/packages/evo-marko/.storybook/custom-styles.css
+++ b/packages/evo-storybook-addon-theme/src/layout.scss
@@ -1,8 +1,7 @@
-/*
-A couple of modules need to have a fixed with otherwise they will not work well
-*/
-.docs-story div[scale="1"],
-#storybook-root {
+// Storybook's centered layout vertically aligns the story root. Keeping the
+// root full-width preserves each story's natural horizontal alignment.
+#storybook-root,
+.docs-story div[scale="1"] {
   width: 100%;
 }
 
@@ -12,41 +11,42 @@ A couple of modules need to have a fixed with otherwise they will not work well
 
 .icon-examples {
   display: grid;
-  grid-template-columns: 1fr 1fr;
   gap: 10px;
+  grid-template-columns: 1fr 1fr;
 }
 
 .icon-examples > div {
+  align-items: center;
+  border: 1px solid black;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: 150px;
   justify-content: center;
-  border: 1px solid black;
   padding: 5px;
+  width: 150px;
 }
 
 .icon-examples > div > span.icon {
-  display: flex;
-  justify-content: center;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 64px;
+  justify-content: center;
   margin: 15px 0;
+  width: 100%;
 }
+
 .icon-examples > div > span.text {
   color: var(--color-yellow-6);
   text-align: center;
 }
 
 .icon-examples > div > span.text::before {
-  content: "<";
   color: var(--color-blue-5);
+  content: "<";
 }
 
 .icon-examples > div > span.text::after {
-  content: "/>";
   color: var(--color-blue-5);
+  content: "/>";
 }
 
 @media (min-width: 601px) {
diff --git a/packages/evo-storybook-addon-theme/src/preview.tsx b/packages/evo-storybook-addon-theme/src/preview.tsx
index 9d1fe704668..55a742b98e3 100644
--- a/packages/evo-storybook-addon-theme/src/preview.tsx
+++ b/packages/evo-storybook-addon-theme/src/preview.tsx
@@ -2,6 +2,7 @@ import "@ebay/skin/dist/tokens/evo-core.css";
 import "@ebay/skin/dist/tokens/evo-light.css";
 import "@ebay/skin/dist/tokens/evo-dark.css";
 import "./color-scheme.scss";
+import "./layout.scss";
 import ThemedDocsContainer from "./docs-container";
 
 export default {
@@ -31,6 +32,7 @@ export default {
     },
   ],
   parameters: {
+    layout: "centered",
     docs: {
       container: ThemedDocsContainer,
     },