diff --git a/package-lock.json b/package-lock.json
index d6f75af998e310..761595fbc98162 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59612,6 +59612,7 @@
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/route": "file:../route",
 				"@wordpress/theme": "file:../theme",
+				"@wordpress/ui": "file:../ui",
 				"@wordpress/url": "file:../url",
 				"clsx": "^2.1.1"
 			},
diff --git a/packages/boot/package.json b/packages/boot/package.json
index 4e86b400e0ff0f..e32c1de24e92bf 100644
--- a/packages/boot/package.json
+++ b/packages/boot/package.json
@@ -62,6 +62,7 @@
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/route": "file:../route",
 		"@wordpress/theme": "file:../theme",
+		"@wordpress/ui": "file:../ui",
 		"@wordpress/url": "file:../url",
 		"clsx": "^2.1.1"
 	},
diff --git a/packages/boot/src/components/root/index.tsx b/packages/boot/src/components/root/index.tsx
index 275e8e622d2259..79b8d700a46283 100644
--- a/packages/boot/src/components/root/index.tsx
+++ b/packages/boot/src/components/root/index.tsx
@@ -19,6 +19,8 @@ import { menu } from '@wordpress/icons';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Page } from '@wordpress/admin-ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -59,130 +61,138 @@ export default function Root() {
 
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
-					<div
-						className={ clsx( 'boot-layout', {
-							'has-canvas': !! canvas || canvas === null,
-							'has-full-canvas': isFullScreen,
-						} ) }
-					>
-						<SavePanel />
-						<SnackbarNotices className="boot-notices__snackbar" />
-						{ isMobileViewport && (
-							<Page.SidebarToggleFill>
-								<Button
-									icon={ menu }
-									onClick={ () =>
-										setIsMobileSidebarOpen( true )
-									}
-									label={ __( 'Open navigation panel' ) }
-									size="compact"
-								/>
-							</Page.SidebarToggleFill>
-						) }
-						{ /* Mobile Sidebar Backdrop */ }
-						<AnimatePresence>
-							{ isMobileViewport &&
-								isMobileSidebarOpen &&
-								! isFullScreen && (
-									<motion.div
-										initial={ { opacity: 0 } }
-										animate={ { opacity: 1 } }
-										exit={ { opacity: 0 } }
-										transition={ {
-											type: 'tween',
-											duration: disableMotion ? 0 : 0.2,
-											ease: 'easeOut',
-										} }
-										className="boot-layout__sidebar-backdrop"
+			<Tooltip.Provider>
+				<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
+					<UserThemeProvider color={ { bg: '#1d2327' } }>
+						<div
+							className={ clsx( 'boot-layout', {
+								'has-canvas': !! canvas || canvas === null,
+								'has-full-canvas': isFullScreen,
+							} ) }
+						>
+							<SavePanel />
+							<SnackbarNotices className="boot-notices__snackbar" />
+							{ isMobileViewport && (
+								<Page.SidebarToggleFill>
+									<Button
+										icon={ menu }
 										onClick={ () =>
-											setIsMobileSidebarOpen( false )
+											setIsMobileSidebarOpen( true )
 										}
-										onKeyDown={ ( event ) => {
-											if ( event.key === 'Escape' ) {
-												setIsMobileSidebarOpen( false );
-											}
-										} }
-										role="button"
-										tabIndex={ -1 }
-										aria-label={ __(
-											'Close navigation panel'
-										) }
+										label={ __( 'Open navigation panel' ) }
+										size="compact"
 									/>
-								) }
-						</AnimatePresence>
-						{ /* Mobile Sidebar */ }
-						<AnimatePresence>
-							{ isMobileViewport &&
-								isMobileSidebarOpen &&
-								! isFullScreen && (
-									<motion.div
-										initial={ { x: '-100%' } }
-										animate={ { x: 0 } }
-										exit={ { x: '-100%' } }
-										transition={ {
-											type: 'tween',
-											duration: disableMotion ? 0 : 0.2,
-											ease: 'easeOut',
-										} }
-										className="boot-layout__sidebar is-mobile"
-									>
-										<Sidebar />
-									</motion.div>
-								) }
-						</AnimatePresence>
-						{ /* Desktop Sidebar */ }
-						{ ! isMobileViewport && ! isFullScreen && (
-							<div className="boot-layout__sidebar">
-								<Sidebar />
-							</div>
-						) }
-						<div className="boot-layout__surfaces">
-							<UserThemeProvider color={ { bg: '#ffffff' } }>
-								<Outlet />
-								{ /* Render Canvas in Root to prevent remounting on route changes */ }
-								{ ( canvas || canvas === null ) && (
-									<div
-										className={ clsx(
-											'boot-layout__canvas',
-											{
-												'has-mobile-drawer':
-													canvas?.isPreview &&
-													isMobileViewport,
+								</Page.SidebarToggleFill>
+							) }
+							{ /* Mobile Sidebar Backdrop */ }
+							<AnimatePresence>
+								{ isMobileViewport &&
+									isMobileSidebarOpen &&
+									! isFullScreen && (
+										<motion.div
+											initial={ { opacity: 0 } }
+											animate={ { opacity: 1 } }
+											exit={ { opacity: 0 } }
+											transition={ {
+												type: 'tween',
+												duration: disableMotion
+													? 0
+													: 0.2,
+												ease: 'easeOut',
+											} }
+											className="boot-layout__sidebar-backdrop"
+											onClick={ () =>
+												setIsMobileSidebarOpen( false )
 											}
-										) }
-									>
-										{ canvas?.isPreview &&
-											isMobileViewport && (
-												<div className="boot-layout__mobile-sidebar-drawer">
-													<Button
-														icon={ menu }
-														onClick={ () =>
-															setIsMobileSidebarOpen(
-																true
-															)
-														}
-														label={ __(
-															'Open navigation panel'
-														) }
-														size="compact"
-													/>
-												</div>
+											onKeyDown={ ( event ) => {
+												if ( event.key === 'Escape' ) {
+													setIsMobileSidebarOpen(
+														false
+													);
+												}
+											} }
+											role="button"
+											tabIndex={ -1 }
+											aria-label={ __(
+												'Close navigation panel'
 											) }
-										<CanvasRenderer
-											canvas={ canvas }
-											routeContentModule={
-												routeContentModule
-											}
 										/>
-									</div>
-								) }
-							</UserThemeProvider>
+									) }
+							</AnimatePresence>
+							{ /* Mobile Sidebar */ }
+							<AnimatePresence>
+								{ isMobileViewport &&
+									isMobileSidebarOpen &&
+									! isFullScreen && (
+										<motion.div
+											initial={ { x: '-100%' } }
+											animate={ { x: 0 } }
+											exit={ { x: '-100%' } }
+											transition={ {
+												type: 'tween',
+												duration: disableMotion
+													? 0
+													: 0.2,
+												ease: 'easeOut',
+											} }
+											className="boot-layout__sidebar is-mobile"
+										>
+											<Sidebar />
+										</motion.div>
+									) }
+							</AnimatePresence>
+							{ /* Desktop Sidebar */ }
+							{ ! isMobileViewport && ! isFullScreen && (
+								<div className="boot-layout__sidebar">
+									<Sidebar />
+								</div>
+							) }
+							<div className="boot-layout__surfaces">
+								<UserThemeProvider color={ { bg: '#ffffff' } }>
+									<Outlet />
+									{ /* Render Canvas in Root to prevent remounting on route changes */ }
+									{ ( canvas || canvas === null ) && (
+										<div
+											className={ clsx(
+												'boot-layout__canvas',
+												{
+													'has-mobile-drawer':
+														canvas?.isPreview &&
+														isMobileViewport,
+												}
+											) }
+										>
+											{ canvas?.isPreview &&
+												isMobileViewport && (
+													<div className="boot-layout__mobile-sidebar-drawer">
+														<Button
+															icon={ menu }
+															onClick={ () =>
+																setIsMobileSidebarOpen(
+																	true
+																)
+															}
+															label={ __(
+																'Open navigation panel'
+															) }
+															size="compact"
+														/>
+													</div>
+												) }
+											<CanvasRenderer
+												canvas={ canvas }
+												routeContentModule={
+													routeContentModule
+												}
+											/>
+										</div>
+									) }
+								</UserThemeProvider>
+							</div>
 						</div>
-					</div>
+					</UserThemeProvider>
 				</UserThemeProvider>
-			</UserThemeProvider>
+			</Tooltip.Provider>
 		</SlotFillProvider>
 	);
 }
diff --git a/packages/boot/src/components/save-button/index.tsx b/packages/boot/src/components/save-button/index.tsx
index 9f40c50591883e..bfa87e1e8fb834 100644
--- a/packages/boot/src/components/save-button/index.tsx
+++ b/packages/boot/src/components/save-button/index.tsx
@@ -8,7 +8,9 @@ import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut, rawShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 import { EntitiesSavedStates } from '@wordpress/editor';
-import { Button, Modal, Tooltip as WCTooltip } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -82,28 +84,37 @@ export default function SaveButton() {
 		);
 	};
 	const label = getLabel();
+	const shortcut = displayShortcut.primary( 's' );
 
 	return (
 		<>
-			<WCTooltip
-				text={ hasChanges ? label : undefined }
-				shortcut={ displayShortcut.primary( 's' ) }
-			>
-				<Button
-					variant="primary"
-					size="compact"
-					onClick={ () => setIsSaveViewOpened( true ) }
-					onBlur={ hideSavedState }
-					disabled={ disabled }
-					accessibleWhenDisabled
-					isBusy={ isSaving }
-					aria-keyshortcuts={ rawShortcut.primary( 's' ) }
-					className="boot-save-button"
-					icon={ isInSavedState ? check : undefined }
-				>
-					{ label }
-				</Button>
-			</WCTooltip>
+			<Tooltip.Root>
+				<Tooltip.Trigger
+					render={
+						<Button
+							variant="primary"
+							size="compact"
+							onClick={ () => setIsSaveViewOpened( true ) }
+							onBlur={ hideSavedState }
+							disabled={ disabled }
+							accessibleWhenDisabled
+							isBusy={ isSaving }
+							aria-keyshortcuts={ rawShortcut.primary( 's' ) }
+							className="boot-save-button"
+							icon={ isInSavedState ? check : undefined }
+						>
+							{ label }
+						</Button>
+					}
+				/>
+				<Tooltip.Popup>
+					{ hasChanges && label }
+					{ /* TODO: replace with a future `@wordpress/ui` `Shortcut` primitive once available; until then, render the shortcut inline with a local class name to avoid leaking the `components-*` namespace outside `@wordpress/components`. */ }
+					<span className="boot-save-button__shortcut">
+						{ shortcut }
+					</span>
+				</Tooltip.Popup>
+			</Tooltip.Root>
 			{ isSaveViewOpen && (
 				<Modal
 					title={ __( 'Review changes' ) }
diff --git a/packages/boot/src/components/save-button/style.scss b/packages/boot/src/components/save-button/style.scss
index 69bd08e23aaef6..95413ff895010a 100644
--- a/packages/boot/src/components/save-button/style.scss
+++ b/packages/boot/src/components/save-button/style.scss
@@ -1,3 +1,9 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .boot-save-button {
 	width: 100%;
 }
+
+.boot-save-button__shortcut {
+	margin-left: $grid-unit-10;
+}
diff --git a/packages/boot/src/components/site-icon-link/index.tsx b/packages/boot/src/components/site-icon-link/index.tsx
index acc421d5c9c75c..cb1c88abbd603a 100644
--- a/packages/boot/src/components/site-icon-link/index.tsx
+++ b/packages/boot/src/components/site-icon-link/index.tsx
@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { Link, privateApis as routePrivateApis } from '@wordpress/route';
-import { Tooltip as WCTooltip } from '@wordpress/components';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+
 import SiteIcon from '../site-icon';
 import './style.scss';
 
@@ -26,23 +28,30 @@ function SiteIconLink( {
 	const canGoBack = useCanGoBack();
 
 	return (
-		<WCTooltip text={ props[ 'aria-label' ] } placement="right">
-			<Link
-				to={ to }
-				aria-label={ props[ 'aria-label' ] }
-				className="boot-site-icon-link"
-				onClick={ ( event ) => {
-					// If possible, restore the previous page with
-					// filters etc.
-					if ( canGoBack && isBackButton ) {
-						event.preventDefault();
-						router.history.back();
-					}
-				} }
-			>
-				<SiteIcon />
-			</Link>
-		</WCTooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<Link
+						to={ to }
+						aria-label={ props[ 'aria-label' ] }
+						className="boot-site-icon-link"
+						onClick={ ( event ) => {
+							// If possible, restore the previous page with
+							// filters etc.
+							if ( canGoBack && isBackButton ) {
+								event.preventDefault();
+								router.history.back();
+							}
+						} }
+					>
+						<SiteIcon />
+					</Link>
+				}
+			/>
+			<Tooltip.Popup positioner={ <Tooltip.Positioner side="right" /> }>
+				{ props[ 'aria-label' ] }
+			</Tooltip.Popup>
+		</Tooltip.Root>
 	);
 }