Add tooltip sample

Refs: #7987

Author: anicyne

packages/components/src/components/input-line.scss

@@ -9,10 +9,6 @@
 		position: relative;
 	}
 
-	.kol-tooltip-wc .tooltip-floating {
-		position: absolute;
-	}
-
 	.kol-input .input-slot {
 		flex-grow: 1;
 		overflow: hidden;

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

@@ -11,7 +11,7 @@
 		animation-name: fadeInOpacity;
 		animation-timing-function: ease-in;
 		display: none;
-		position: fixed;
+		position: absolute;
 		visibility: hidden;
 		/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
 		top: 0;

packages/samples/react/src/components/tooltip/basic.tsx

@@ -0,0 +1,56 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolInputText, KolPopoverButton, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import { FormWrap } from '../FormWrap';
+
+const InputTextVariants = <></>;
+export const ToolbarBasic: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example shows how tooltips in KolPopoverButton and KolInputText behave inside different container contexts using container queries. It compares
+					three setups: a standard container layout, a media-specific layout, and a layout with potential shifts caused by container-query behavior.
+				</p>
+			</SampleDescription>
+			<FormWrap RefComponent={InputTextVariants} />
+
+			<KolHeading _label="Default layout container using standard grid." _level={2} />
+			<div className="container-example-bottom">
+				<div className="front-block" />
+				<div className="container-container">
+					<div className="container-grid">
+						<KolInputText _label="container-text" _hideLabel />
+						<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+							This is an explanation shown on click.
+						</KolPopoverButton>{' '}
+					</div>
+				</div>
+			</div>
+
+			<KolHeading _label="Media-specific layout using different container styles." _level={2} />
+			<div className="media-container">
+				<div className="media-grid">
+					<KolInputText _label="media-text" _hideLabel />
+					<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+						This is an explanation shown on click.
+					</KolPopoverButton>
+				</div>
+			</div>
+
+			<KolHeading _label=" Layout with container queries and potential layout shifts." _level={2} />
+			<div className="container-example-bottom">
+				<div className="front-block" />
+				<div className="container-container-bottom">
+					<div className="container-grid">
+						<KolInputText _label="container-text-bottom" _hideLabel />
+						<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+							This is an explanation shown on click.
+						</KolPopoverButton>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};

packages/samples/react/src/components/tooltip/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { ToolbarBasic } from './basic';
+
+export const TOOLTIP_ROUTES: Routes = {
+	tooltip: {
+		basic: ToolbarBasic,
+	},
+};

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

@@ -49,6 +49,7 @@ import { TABS_ROUTES } from '../components/tabs/routes';
 import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
+import { TOOLTIP_ROUTES } from '../components/tooltip/routes';
 import { TREE_ROUTES } from '../components/tree/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 
@@ -103,6 +104,7 @@ export const ROUTES: Routes = {
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
 	...TOOLBAR_ROUTES,
+	...TOOLTIP_ROUTES,
 	...TREE_ROUTES,
 	...VERSION_ROUTES,
 	...SCENARIO_ROUTES,

packages/samples/react/src/style.scss

@@ -52,6 +52,58 @@ hr {
 	width: rem(400);
 }
 
+.media-container {
+	padding: rem(16);
+	width: 100%;
+	height: rem(240);
+	align-content: center;
+}
+
+.media-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: rem(16);
+}
+
+@media (max-width: 600px) {
+	.media-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+.container-container-bottom,
+.container-container {
+	width: 80%;
+	height: rem(240);
+	padding: rem(16);
+	align-content: center;
+	container: test / size;
+}
+
+.container-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: rem(16);
+}
+
+
+@container test (max-width: 600px) {
+	.container-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+.container-example-bottom {
+	display: flex;
+	width: 100%;
+}
+
+.front-block {
+	height: rem(272);
+	width: rem(240);
+}
+
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
@@ -89,4 +141,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}