diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
index 7bc4ef32b..b21cf2395 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -1,11 +1,11 @@
 import { DENSITIES } from "../../composables/density";
 import { expect, test } from "../../playwright/a11y";
+import type { Locator } from "@playwright/test";
 import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
 import OnyxInput from "./OnyxInput.vue";
 
 test.describe("Screenshot tests", () => {
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  const isTooltipVisible = async (tooltip: any) => {
+  const isTooltipVisible = async (tooltip: Locator) => {
     await expect(tooltip).toBeVisible();
   };
 
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
index 3333a06dc..132510fb9 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -156,7 +156,7 @@ export const CustomError = {
 /**
  * This example shows an input with info label tooltip.
  */
-export const WithInfoLabel: Story = {
+export const WithLabelTooltip: Story = {
   args: {
     label: "Label",
     labelTooltip: "More information",
@@ -170,9 +170,9 @@ export const WithInfoLabel: Story = {
 };
 
 /**
- * This example shows an input with info message / additional text.
+ * This example shows an input with message / additional text and an optional tooltip.
  */
-export const WithInfoMessage = {
+export const WithMessageTooltip = {
   args: {
     ...Default.args,
     message: "Example message",
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index ccf6c36e1..5c4b1bedb 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -86,16 +86,16 @@ const { t } = injectI18n();
         :class="[!props.required ? requiredMarkerClass : undefined]"
       >
         <div class="onyx-input__header">
-          <div class="onyx-truncation-ellipsis">
+          <span class="onyx-truncation-ellipsis">
             {{ props.label }}
-          </div>
-          <div :class="[props.required ? requiredMarkerClass : undefined]"></div>
-          <OnyxTooltip v-if="props.labelTooltip" open="hover" :text="props.labelTooltip">
+          </span>
+          <span :class="[props.required ? requiredMarkerClass : undefined]"></span>
+          <OnyxTooltip v-if="props.labelTooltip" :text="props.labelTooltip">
             <button :aria-label="t('infoTooltip')" class="onyx-input__tooltip-trigger">
               <OnyxIcon :icon="circleInformation" color="neutral" size="12px" />
             </button>
           </OnyxTooltip>
-          <div class="onyx-input__optional">{{ t("optional") }}</div>
+          <span v-if="!props.required" class="onyx-input__optional">{{ t("optional") }}</span>
         </div>
       </div>
 
@@ -136,8 +136,7 @@ const { t } = injectI18n();
       <span v-if="props.message" class="onyx-truncation-ellipsis">{{ props.message }}</span>
       <OnyxTooltip
         v-if="props.messageTooltip"
-        class="onyx-input__info-message"
-        open="hover"
+        class="onyx-input__message-tooltip"
         position="bottom"
         :text="props.messageTooltip"
       >
@@ -212,7 +211,7 @@ const { t } = injectI18n();
       width: 100%;
     }
 
-    &__info-message {
+    &__message-tooltip {
       height: 1rem;
       align-self: center;
     }
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
index 443714ff2..cd6b9fa22 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -1,11 +1,11 @@
 import { DENSITIES } from "../../composables/density";
 import { expect, test } from "../../playwright/a11y";
+import type { Locator } from "@playwright/test";
 import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
 import OnyxTextarea from "./OnyxTextarea.vue";
 
 test.describe("Screenshot tests", () => {
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  const isTooltipVisible = async (tooltip: any) => {
+  const isTooltipVisible = async (tooltip: Locator) => {
     await expect(tooltip).toBeVisible();
   };
 
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
index 7db8f1e7f..b4b14b448 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
@@ -140,9 +140,9 @@ export const Autosize = {
 } satisfies Story;
 
 /**
- * This example shows a textarea with info tooltip.
+ * This example shows a textarea with label tooltip.
  */
-export const WithInfoLabel: Story = {
+export const WithLabelTooltip: Story = {
   args: {
     label: "Label",
     labelTooltip: "More Information",
@@ -156,9 +156,9 @@ export const WithInfoLabel: Story = {
 };
 
 /**
- * This example shows a textarea with info message / additional text.
+ * This example shows a textarea with message / additional text and an optional tooltip.
  */
-export const WithInfoMessage = {
+export const WithMessageTooltip = {
   args: {
     ...Default.args,
     message: "Example message",
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 6a3e810af..e35b2bba2 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -106,14 +106,14 @@ const handleInput = (event: Event) => {
         :class="[!props.required ? requiredMarkerClass : undefined]"
       >
         <div class="onyx-textarea__header">
-          <div class="onyx-truncation-ellipsis">{{ props.label }}</div>
-          <div :class="[props.required ? requiredMarkerClass : undefined]"></div>
-          <OnyxTooltip v-if="props.labelTooltip" open="hover" :text="props.labelTooltip">
+          <span class="onyx-truncation-ellipsis">{{ props.label }}</span>
+          <span :class="[props.required ? requiredMarkerClass : undefined]"></span>
+          <OnyxTooltip v-if="props.labelTooltip" :text="props.labelTooltip">
             <button :aria-label="t('infoTooltip')" class="onyx-textarea__tooltip-trigger">
               <OnyxIcon :icon="circleInformation" color="neutral" size="12px" />
             </button>
           </OnyxTooltip>
-          <div class="onyx-textarea__optional">{{ t("optional") }}</div>
+          <span v-if="props.required" class="onyx-textarea__optional">{{ t("optional") }}</span>
         </div>
       </div>
 
@@ -151,8 +151,7 @@ const handleInput = (event: Event) => {
       <span v-if="props.message" class="onyx-truncation-ellipsis">{{ props.message }}</span>
       <OnyxTooltip
         v-if="props.messageTooltip"
-        class="onyx-textarea__info-message"
-        open="hover"
+        class="onyx-textarea__message-tooltip"
         position="bottom"
         :text="props.messageTooltip"
       >
@@ -227,12 +226,11 @@ const handleInput = (event: Event) => {
 
     &__header {
       display: flex;
-      // gap: var(--onyx-spacing-2xs);
       max-width: 100%;
       width: 100%;
     }
 
-    &__info-message {
+    &__message-tooltip {
       height: 1rem;
       align-self: center;
     }