diff --git a/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png
index 8d2653e6803c..d909206c8fb9 100644
Binary files a/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png
index dc5ea60e6325..6839790158d1 100644
Binary files a/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png
index 8d2653e6803c..d909206c8fb9 100644
Binary files a/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/packages/components/src/components/popover/index.html b/packages/components/src/components/popover/index.html
index 64363a9aba83..5ddbf5c71b23 100644
--- a/packages/components/src/components/popover/index.html
+++ b/packages/components/src/components/popover/index.html
@@ -7,113 +7,51 @@
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<h2>Default</h2>
-		<button class="db-button" aria-describedby="popover-01">
-			Popover bottom
-			<i class="db-popover" id="popover-01">Test</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-02">
-			Popover top
-			<i class="db-popover" data-placement="top" id="popover-02">Test</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-03">
-			Popover left
-			<i class="db-popover" data-placement="left" id="popover-03">Test</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-04">
-			Popover right
-			<i class="db-popover" data-placement="right" id="popover-04"
-				>Test</i
-			>
-		</button>
-
-		<h2>Gap</h2>
-		<button class="db-button" aria-describedby="popover-05">
-			Popover bottom gap
-			<i class="db-popover" data-gap="true" id="popover-05">Test</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-06">
-			Popover top gap
-			<i
-				class="db-popover"
-				data-placement="top"
-				data-gap="true"
-				id="popover-06"
-			>
-				Test
-			</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-07">
-			Popover left gap
-			<i
-				class="db-popover"
-				data-placement="left"
-				data-gap="true"
-				id="popover-07"
-			>
-				Test
-			</i>
-		</button>
-		<button class="db-button" aria-describedby="popover-08">
-			Popover right gap
-			<i
-				class="db-popover"
-				data-placement="right"
-				data-gap="true"
-				id="popover-08"
-			>
-				Test
-			</i>
-		</button>
-
-		<h2>Animation/delay</h2>
-
-		<button class="db-button" aria-describedby="popover-09">
-			Popover delay slow
-			<i class="db-popover" data-delay="slow" id="popover-09">Test</i>
-		</button>
-
-		<button class="db-button" aria-describedby="popover-10">
-			Popover delay fast
-			<i class="db-popover" data-delay="fast" id="popover-10">Test</i>
-		</button>
-
-		<button class="db-button" aria-describedby="popover-11">
-			Popover plain
-			<i class="db-popover" data-behavior="plain" id="popover-11">Test</i>
-		</button>
-
-		<h2>Width</h2>
-
-		<button class="db-button" aria-describedby="popover-12">
-			Popover auto width
-			<i class="db-popover" id="popover-12">
-				Max width, lorem ipsum dolor sit amet, consetetur sadipscing
-			</i>
-		</button>
-
-		<button class="db-button" aria-describedby="popover-13">
-			Popover fixed width
-			<i class="db-popover" data-width="fixed" id="popover-13">
-				Max width, lorem ipsum dolor sit amet, consetetur sadipscing
-			</i>
-		</button>
-
-		<button class="db-button" aria-describedby="popover-14">
-			Popover test
-			<i class="db-popover" data-placement="top" id="popover-14">
-				<h4>Title</h4>
-				<p>Paragraph</p>
-				<a href="#">Link</a>
-			</i>
-		</button>
-
-		<button class="db-button" aria-describedby="popover-15">
-			Popover open
-			<i class="db-popover" data-open="true" id="popover-15">
-				<h4>Title</h4>
-				<p>Paragraph</p>
-				<a href="#">Link</a>
-			</i>
-		</button>
+		<div class="db-stack" data-direction="row" style="overflow: unset">
+			<div id="popover-00" class="db-popover">
+				<button class="db-button" type="button">right</button>
+				<article
+					class="db-popover-content"
+					data-placement="right"
+					data-animation="true"
+				>
+					<button class="db-button" type="button">
+						Inside Popover
+					</button>
+				</article>
+			</div>
+			<div id="popover-01" class="db-popover">
+				<button class="db-button" type="button">bottom</button>
+				<article class="db-popover-content" data-animation="true">
+					<button class="db-button" type="button">
+						Inside Popover
+					</button>
+				</article>
+			</div>
+			<div id="popover-02" class="db-popover">
+				<button class="db-button" type="button">top</button>
+				<article
+					class="db-popover-content"
+					data-placement="top"
+					data-animation="true"
+				>
+					<button class="db-button" type="button">
+						Inside Popover
+					</button>
+				</article>
+			</div>
+			<div id="popover-02" class="db-popover">
+				<button class="db-button" type="button">left</button>
+				<article
+					class="db-popover-content"
+					data-placement="left"
+					data-animation="true"
+				>
+					<button class="db-button" type="button">
+						Inside Popover
+					</button>
+				</article>
+			</div>
+		</div>
 	</body>
 </html>
diff --git a/packages/components/src/components/popover/popover.scss b/packages/components/src/components/popover/popover.scss
index df2a4bcc9160..a0a24a0ebcd9 100644
--- a/packages/components/src/components/popover/popover.scss
+++ b/packages/components/src/components/popover/popover.scss
@@ -5,6 +5,8 @@
 .db-popover {
 	position: relative;
 	display: flex;
+	block-size: fit-content;
+	inline-size: fit-content;
 
 	&:is([data-e2e-hover="true"], :hover, :focus-within) {
 		> article:not([data-open="false"]) {
diff --git a/packages/components/src/components/tooltip/index.html b/packages/components/src/components/tooltip/index.html
index e551b7bb2b2f..48e20e9b405d 100644
--- a/packages/components/src/components/tooltip/index.html
+++ b/packages/components/src/components/tooltip/index.html
@@ -7,25 +7,45 @@
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<h1>Placement</h1>
-		<button class="db-button" aria-describedby="tooltip-01">
+		<button
+			class="db-button"
+			aria-describedby="tooltip-01"
+			data-has-tooltip="true"
+		>
 			Tooltip
 			<i class="db-tooltip" id="tooltip-01">Test</i>
 		</button>
-		<button class="db-button" aria-describedby="tooltip-02">
+		<button
+			class="db-button"
+			aria-describedby="tooltip-02"
+			data-has-tooltip="true"
+		>
 			Tooltip top
 			<i class="db-tooltip" data-placement="top" id="tooltip-02">Test</i>
 		</button>
-		<button class="db-button" aria-describedby="tooltip-03">
+		<button
+			class="db-button"
+			aria-describedby="tooltip-03"
+			data-has-tooltip="true"
+		>
 			Tooltip left
 			<i class="db-tooltip" data-placement="left" id="tooltip-03">Test</i>
 		</button>
-		<button class="db-button" aria-describedby="tooltip-04">
+		<button
+			class="db-button"
+			aria-describedby="tooltip-04"
+			data-has-tooltip="true"
+		>
 			Tooltip right
 			<i class="db-tooltip" data-placement="right" id="tooltip-04"
 				>Test</i
 			>
 		</button>
-		<button class="db-button" aria-describedby="tooltip-05">
+		<button
+			class="db-button"
+			aria-describedby="tooltip-05"
+			data-has-tooltip="true"
+		>
 			Tooltip Strong
 			<i class="db-tooltip" data-emphasis="strong" id="tooltip-05"
 				>Test</i
diff --git a/packages/components/src/styles/internal/_popover-component.scss b/packages/components/src/styles/internal/_popover-component.scss
index 484bdcb1e4af..e2a0cf315d9a 100644
--- a/packages/components/src/styles/internal/_popover-component.scss
+++ b/packages/components/src/styles/internal/_popover-component.scss
@@ -4,6 +4,10 @@
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "component";
 
+$popover-gap-size: var(--db-popover-distance);
+$popover-inset: calc(100% + #{$popover-gap-size} * var(--db-popover-gap, 0));
+$popover-gap-inset: calc(-1 * #{$popover-gap-size});
+
 %popover-center {
 	&:not([data-placement], [data-corrected-placement]),
 	&[data-placement="bottom"]:not([data-corrected-placement]),
@@ -79,6 +83,76 @@
 	&:is(.db-tooltip) {
 		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
 	}
+
+	/* This is for pure html css without using JS */
+	&:not([data-corrected-placement]) {
+		&[data-placement^="bottom"],
+		&[data-placement^="top"] {
+			&[data-placement$="end"] {
+				inset-inline-end: 0;
+			}
+
+			&[data-placement$="start"] {
+				inset-inline-start: 0;
+			}
+		}
+
+		&[data-placement^="left"],
+		&[data-placement^="right"] {
+			&[data-placement$="end"] {
+				inset-block-end: 0;
+			}
+
+			&[data-placement$="start"] {
+				inset-block-start: 0;
+			}
+		}
+
+		&:not([data-placement]),
+		&[data-placement^="bottom"] {
+			inset-block-start: $popover-inset;
+
+			&::before {
+				inset-inline-start: 0;
+				inline-size: 100%;
+				block-size: $popover-gap-size;
+				inset-block-start: $popover-gap-inset;
+			}
+		}
+
+		&[data-placement^="top"] {
+			inset-block-end: $popover-inset;
+
+			&::before {
+				inset-inline-end: 0;
+				inline-size: 100%;
+				block-size: $popover-gap-size;
+				inset-block-end: $popover-gap-inset;
+			}
+		}
+
+		&[data-placement^="left"] {
+			inset-inline-end: $popover-inset;
+
+			&::before {
+				inset-block-end: 0;
+				block-size: 100%;
+				inline-size: $popover-gap-size;
+				inset-inline-end: $popover-gap-inset;
+			}
+		}
+
+		&[data-placement^="right"] {
+			inset-inline-start: $popover-inset;
+
+			&::before {
+				inset-block-start: 0;
+				block-size: 100%;
+				inline-size: $popover-gap-size;
+				inset-inline-start: $popover-gap-inset;
+			}
+		}
+	}
 }
 
 @mixin get-popover-show() {
