Fix broken tooltip layout with container layout issues

packages/components/src/components/tooltip/style.scss

@@ -3,6 +3,7 @@
 @layer kol-component {
 	.kol-tooltip-wc {
 		display: contents;
+		contain: layout;
 	}
 
 	.kol-tooltip-wc .tooltip-floating {

packages/samples/react/src/scenarios/routes.ts

@@ -1,26 +1,28 @@
 import { Routes } from '../shares/types';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
+import { ChangeTabindex } from './change-tabindex';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
-import { InputsGetValue } from './inputs-get-value';
-import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
-import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
-import { ChangeTabindex } from './change-tabindex';
+import { InputsGetValue } from './inputs-get-value';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
+import { StaticForm } from './static-form';
+import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
+import { TooltipPositioning } from './tooltip-positioning';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
 		'appointment-form': AppointmentForm,
+		'change-tabindex': ChangeTabindex,
 		'custom-tooltip-width': CustomTooltipWidth,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
 		'input-group-with-error': InputGroupWithError,
 		'inputs-get-value': InputsGetValue,
+		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
-		'change-tabindex': ChangeTabindex,
-		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
+		'tooltip-positioning': TooltipPositioning,
 	},
 };

packages/samples/react/src/scenarios/tooltip-positioning.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolPopoverButton } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const TooltipPositioning: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing
+					tooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements
+					use container-based sizing and layout rules.
+				</p>
+			</SampleDescription>
+
+			<div style={{ container: 'test / size' }}>
+				<KolPopoverButton _label="Sample PopoverButton—Click for Popover" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};