diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index f5551bb752..eec660d0f7 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -226,4 +226,10 @@ export default {
   bottom: 15px;
   right: 25px;
 }
+.v-tooltip > .v-overlay__content {
+  opacity: 10;
+  color: white;
+  font-weight: 900;
+  background-color: rgb(71, 70, 70);
+}
 </style>
diff --git a/packages/playground/src/components/algorand_capacity.vue b/packages/playground/src/components/algorand_capacity.vue
index 89a2efc154..694f7562ee 100644
--- a/packages/playground/src/components/algorand_capacity.vue
+++ b/packages/playground/src/components/algorand_capacity.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
-    <v-tooltip location="top" text="Enable this option to set custom resources.">
-      <template v-slot:activator="{ props }">
-        <v-switch color="primary" inset label="Set Custom Capacity" v-model="custom" v-bind="props" />
-      </template>
-    </v-tooltip>
+    <input-tooltip inline #="{ props }" tooltip="Enable this option to set custom resources.">
+      <v-switch color="primary" inset label="Set Custom Capacity" v-model="custom" v-bind="props" />
+    </input-tooltip>
 
     <slot></slot>
 
@@ -19,13 +17,8 @@
         #="{ props }"
         ref="cpuInput"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
-          <v-text-field
-            label="CPU (vCores)"
-            type="number"
-            v-model.number="cpu"
-            v-bind="{ ...props, ...tooltipProps }"
-          />
+        <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+          <v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -39,16 +32,8 @@
         #="{ props }"
         ref="memoryInput"
       >
-        <input-tooltip
-          #="{ tooltipProps }"
-          tooltip="The amount of RAM (Random Access Memory) allocated to your instance."
-        >
-          <v-text-field
-            label="Memory (MB)"
-            type="number"
-            v-model.number="memory"
-            v-bind="{ ...props, ...tooltipProps }"
-          />
+        <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+          <v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -63,15 +48,9 @@
         ref="storageInput"
       >
         <input-tooltip
-          #="{ tooltipProps }"
           tooltip="The storage capacity allocated to your instance, indicating the amount of space available to store files, data, and applications."
         >
-          <v-text-field
-            label="Storage Size (GB)"
-            type="number"
-            v-model.number="storage"
-            v-bind="{ ...props, ...tooltipProps }"
-          />
+          <v-text-field label="Storage Size (GB)" type="number" v-model.number="storage" v-bind="props" />
         </input-tooltip>
       </input-validator>
     </template>
diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index ae465348e5..72885df125 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -11,8 +11,8 @@
     :value="$props.modelValue.name"
     #="{ props }"
   >
-    <input-tooltip #="{ tooltipProps }" tooltip="Solution name.">
-      <v-text-field label="Name" v-model="$props.modelValue.name" v-bind="{ ...props, ...tooltipProps }" />
+    <input-tooltip tooltip="Node name.">
+      <v-text-field label="Name" v-model="$props.modelValue.name" v-bind="props" />
     </input-tooltip>
   </input-validator>
 
diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
index dce4b45f45..50317cee7e 100644
--- a/packages/playground/src/components/input_tooltip.vue
+++ b/packages/playground/src/components/input_tooltip.vue
@@ -1,16 +1,28 @@
 <template>
-  <div ref="tooltipContainer">
+  <div class="d-flex">
     <v-tooltip :text="tooltip || 'None!'">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
-        <slot :tooltipProps="{ appendIcon }"></slot>
+        <div class="d-flex" :class="{ 'w-100': !inline }">
+          <slot></slot>
+          <span
+            :style="{ cursor: 'help', marginTop: '17.5px' }"
+            class="ml-3"
+            @mouseenter="propsRef?.onMouseenter"
+            @mouseleave="propsRef?.onMouseleave"
+            @focus="propsRef?.onFocus"
+            @blur="propsRef?.onBlur"
+          >
+            <v-icon>mdi-information</v-icon>
+          </span>
+        </div>
       </template>
     </v-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { ref } from "vue";
 
 export default {
   name: "InputTooltip",
@@ -19,42 +31,24 @@ export default {
       type: String,
       required: true,
     },
+    inline: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   setup() {
-    const tooltipContainer = ref<HTMLElement>();
     const appendIcon = "mdi-information";
 
-    let propsRef: any;
+    const propsRef = ref<any>();
     function getPropsRef(_props: any) {
-      propsRef = _props;
+      propsRef.value = _props;
       return null;
     }
 
-    onMounted(() => {
-      const icon = tooltipContainer.value?.querySelector<HTMLElement>(`i[class*="${appendIcon}"]`);
-      if (icon) {
-        icon.style.cursor = "help";
-        icon.onmouseenter = propsRef.onMouseenter;
-        icon.onmouseleave = propsRef.onMouseleave;
-        icon.onfocus = propsRef.onFocus;
-        icon.onblur = propsRef.onBlur;
-      }
-    });
-
-    onUnmounted(() => {
-      const icon = tooltipContainer.value?.querySelector<HTMLElement>(`i[class*="${appendIcon}"]`);
-      if (icon) {
-        icon.onmouseenter = null;
-        icon.onmouseleave = null;
-        icon.onfocus = null;
-        icon.onblur = null;
-      }
-    });
-
     return {
       appendIcon,
-      tooltipContainer,
       getPropsRef,
+      propsRef,
     };
   },
 };
diff --git a/packages/playground/src/components/k8s_worker.vue b/packages/playground/src/components/k8s_worker.vue
index 9f023fc324..b4eb811ad1 100644
--- a/packages/playground/src/components/k8s_worker.vue
+++ b/packages/playground/src/components/k8s_worker.vue
@@ -11,8 +11,8 @@
     ]"
     #="{ props }"
   >
-    <input-tooltip #="{ tooltipProps }" tooltip="Solution name.">
-      <v-text-field label="Name" v-model="$props.modelValue.name" v-bind="{ ...props, ...tooltipProps }" />
+    <input-tooltip tooltip="Node name.">
+      <v-text-field label="Name" v-model="$props.modelValue.name" v-bind="props" />
     </input-tooltip>
   </input-validator>
 
@@ -26,13 +26,8 @@
     ]"
     #="{ props }"
   >
-    <input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
-      <v-text-field
-        label="CPU (vCores)"
-        type="number"
-        v-model.number="$props.modelValue.cpu"
-        v-bind="{ ...props, ...tooltipProps }"
-      />
+    <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+      <v-text-field label="CPU (vCores)" type="number" v-model.number="$props.modelValue.cpu" v-bind="props" />
     </input-tooltip>
   </input-validator>
 
@@ -46,13 +41,8 @@
     ]"
     #="{ props }"
   >
-    <input-tooltip #="{ tooltipProps }" tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
-      <v-text-field
-        label="Memory (MB)"
-        type="number"
-        v-model.number="$props.modelValue.memory"
-        v-bind="{ ...props, ...tooltipProps }"
-      />
+    <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+      <v-text-field label="Memory (MB)" type="number" v-model.number="$props.modelValue.memory" v-bind="props" />
     </input-tooltip>
   </input-validator>
 
@@ -66,42 +56,31 @@
     ]"
     #="{ props }"
   >
-    <input-tooltip #="{ tooltipProps }" tooltip="Disk Size.">
-      <v-text-field
-        label="Size (GB)"
-        type="number"
-        v-model.number="$props.modelValue.diskSize"
-        v-bind="{ ...props, ...tooltipProps }"
-      />
+    <input-tooltip tooltip="Disk Size.">
+      <v-text-field label="Size (GB)" type="number" v-model.number="$props.modelValue.diskSize" v-bind="props" />
     </input-tooltip>
   </input-validator>
 
-  <v-tooltip
-    location="top"
-    text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+  <input-tooltip
+    inline
+    tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
   >
-    <template v-slot:activator="{ props }">
-      <v-switch color="primary" inset label="Public IPv4" v-model="$props.modelValue.ipv4" v-bind="props" />
-    </template>
-  </v-tooltip>
+    <v-switch color="primary" inset label="Public IPv4" v-model="$props.modelValue.ipv4" />
+  </input-tooltip>
 
-  <v-tooltip
-    location="top"
-    text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+  <input-tooltip
+    inline
+    tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
   >
-    <template v-slot:activator="{ props }">
-      <v-switch color="primary" inset label="Public IPv6" v-model="$props.modelValue.ipv6" v-bind="props" />
-    </template>
-  </v-tooltip>
+    <v-switch color="primary" inset label="Public IPv6" v-model="$props.modelValue.ipv6" />
+  </input-tooltip>
 
-  <v-tooltip
-    location="top"
-    text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+  <input-tooltip
+    inline
+    tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
   >
-    <template v-slot:activator="{ props }">
-      <v-switch color="primary" inset label="Planetary Network" v-model="$props.modelValue.planetary" v-bind="props" />
-    </template>
-  </v-tooltip>
+    <v-switch color="primary" inset label="Planetary Network" v-model="$props.modelValue.planetary" />
+  </input-tooltip>
 
   <RootFsSize
     :cpu="$props.modelValue.cpu"
diff --git a/packages/playground/src/components/select_country.vue b/packages/playground/src/components/select_country.vue
index be209f1ea8..52e4b988a5 100644
--- a/packages/playground/src/components/select_country.vue
+++ b/packages/playground/src/components/select_country.vue
@@ -1,12 +1,14 @@
 <template>
-  <v-autocomplete
-    :disabled="loading"
-    label="Country"
-    :items="countries"
-    clearable
-    :loading="loading"
-    v-model="country"
-  />
+  <input-tooltip tooltip="Select a country to deploy your instance inside it.">
+    <v-autocomplete
+      :disabled="loading"
+      label="Country"
+      :items="countries"
+      clearable
+      :loading="loading"
+      v-model="country"
+    />
+  </input-tooltip>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/playground/src/components/select_farm.vue b/packages/playground/src/components/select_farm.vue
index 858ae23024..973cf1e325 100644
--- a/packages/playground/src/components/select_farm.vue
+++ b/packages/playground/src/components/select_farm.vue
@@ -5,17 +5,20 @@
     <SelectCountry v-model="country" />
 
     <input-validator :rules="[validators.required('Farm is required.')]" :value="farm?.farmID" ref="farmInput">
-      <v-autocomplete
-        :disabled="loading"
-        label="Farm Name"
-        :items="farms"
-        :loading="loading"
-        item-title="name"
-        return-object
-        :model-value="shouldBeUpdated ? undefined : farm"
-        @update:model-value="farm = $event"
-        :error-messages="!loading && !farms.length ? 'No farms where found with the specified resources.' : undefined"
-      />
+      <input-tooltip tooltip="The name of the farm that you want to deploy inside it.">
+        <v-autocomplete
+          :disabled="loading"
+          label="Farm Name"
+          v-bind="props"
+          :items="farms"
+          :loading="loading"
+          item-title="name"
+          return-object
+          :model-value="shouldBeUpdated ? undefined : farm"
+          @update:model-value="farm = $event"
+          :error-messages="!loading && !farms.length ? 'No farms where found with the specified resources.' : undefined"
+        />
+      </input-tooltip>
     </input-validator>
   </section>
 </template>
diff --git a/packages/playground/src/components/select_gateway_node.vue b/packages/playground/src/components/select_gateway_node.vue
index 65975fb81b..ce4fc59378 100644
--- a/packages/playground/src/components/select_gateway_node.vue
+++ b/packages/playground/src/components/select_gateway_node.vue
@@ -4,34 +4,38 @@
     :rules="[validators.required('Gateway node is required.')]"
     #="{ props }"
   >
-    <v-autocomplete
-      label="Select gateway Node"
-      placeholder="Please select a domain."
-      :items="items"
-      item-title="domain"
-      return-object
-      v-bind="props"
-      @update:model-value="$emit('update:model-value', $event)"
-      :loading="items.length === 0 && loading"
-      :disabled="items.length === 0 && loading"
-      :model-value="$props.modelValue"
+    <input-tooltip
+      tooltip="Creates a subdomain for your instance on the selected domain to be able to access your instance from the browser."
     >
-      <template v-slot:append-item v-if="page !== -1">
-        <div class="px-4 mt-4">
-          <v-btn
-            block
-            color="secondary"
-            variant="tonal"
-            rounded="large"
-            size="large"
-            @click="loadNextPage"
-            :loading="loading"
-          >
-            Load More Gateway Nodes
-          </v-btn>
-        </div>
-      </template>
-    </v-autocomplete>
+      <v-autocomplete
+        label="Select gateway"
+        placeholder="Please select a domain."
+        :items="items"
+        item-title="domain"
+        return-object
+        v-bind="props"
+        @update:model-value="$emit('update:model-value', $event)"
+        :loading="items.length === 0 && loading"
+        :disabled="items.length === 0 && loading"
+        :model-value="$props.modelValue"
+      >
+        <template v-slot:append-item v-if="page !== -1">
+          <div class="px-4 mt-4">
+            <v-btn
+              block
+              color="secondary"
+              variant="tonal"
+              rounded="large"
+              size="large"
+              @click="loadNextPage"
+              :loading="loading"
+            >
+              Load More Gateway Nodes
+            </v-btn>
+          </div>
+        </template>
+      </v-autocomplete>
+    </input-tooltip>
   </input-validator>
 </template>
 
diff --git a/packages/playground/src/components/select_solution_flavor.vue b/packages/playground/src/components/select_solution_flavor.vue
index 39c4cb587a..bffe620563 100644
--- a/packages/playground/src/components/select_solution_flavor.vue
+++ b/packages/playground/src/components/select_solution_flavor.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <v-select label="Select" :items="packages" v-model="solution" />
+    <input-tooltip
+      tooltip="Choosing the appropriate computing resources and performance capabilities for a virtual instance or server. When provisioning a virtual machine or cloud instance, the 'Select instance capacity' step allows users to specify the desired CPU, memory, storage, and network resources for their virtual environment."
+    >
+      <v-select label="Select instance capacity" v-bind="props" :items="packages" v-model="solution" />
+    </input-tooltip>
 
     <div v-if="solution === 'custom'">
       <input-validator
@@ -13,7 +17,9 @@
         ]"
         #="{ props }"
       >
-        <v-text-field type="number" label="CPU (vCores)" v-model.number="cpu" v-bind="props" />
+        <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+          <v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
+        </input-tooltip>
       </input-validator>
 
       <input-validator
@@ -26,7 +32,9 @@
         ]"
         #="{ props }"
       >
-        <v-text-field type="number" label="Memory (MB)" v-model.number="memory" v-bind="props" />
+        <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+          <v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
+        </input-tooltip>
       </input-validator>
 
       <input-validator
@@ -34,12 +42,16 @@
         :rules="[
           validators.required('Disk size is required.'),
           validators.isInt('Disk size must be a valid integer.'),
-          validators.min('Minimum allowed disk size is 1 GB.', 1),
+          validators.min('Minimum allowed disk size is 15 GB.', 15),
           validators.max('Maximum allowed disk size is 10000 GB.', 10000),
         ]"
         #="{ props }"
       >
-        <v-text-field type="number" label="Disk (GB)" v-model.number="disk" v-bind="props" />
+        <input-tooltip
+          tooltip="The storage capacity allocated to your instance, indicating the amount of space available to store files, data, and applications."
+        >
+          <v-text-field label="Disk Size (GB)" type="number" v-model.number="disk" v-bind="props" />
+        </input-tooltip>
       </input-validator>
     </div>
   </div>
@@ -54,7 +66,7 @@ import type { solutionFlavor } from "../types";
 type Package = PropType<solutionFlavor>;
 
 const props = defineProps({
-  minimum: { type: Object as Package, default: () => ({ cpu: 1, memory: 1024 * 2, disk: 10 }) },
+  minimum: { type: Object as Package, default: () => ({ cpu: 1, memory: 1024 * 2, disk: 15 }) },
   standard: { type: Object as Package, default: () => ({ cpu: 2, memory: 1024 * 2, disk: 100 }) },
   recommended: {
     type: Object as Package,
diff --git a/packages/playground/src/components/select_vm_image.vue b/packages/playground/src/components/select_vm_image.vue
index f7c6ea8057..26f318148f 100644
--- a/packages/playground/src/components/select_vm_image.vue
+++ b/packages/playground/src/components/select_vm_image.vue
@@ -1,11 +1,16 @@
 <template>
-  <v-autocomplete
-    label="VM Image"
-    :items="[...$props.images, { name: 'Other' }]"
-    return-object
-    item-title="name"
-    v-model="image"
-  />
+  <input-tooltip
+    tooltip="A virtual machine (VM) image is a snapshot or template of a virtual machine that contains the necessary components to create and run a virtual instance of an operating system. It includes the operating system, installed applications, configurations, and any additional files or data required for the virtual machine, also you can put your own image/flist by choosing the other option."
+  >
+    <v-autocomplete
+      label="VM Image"
+      :items="[...$props.images, { name: 'Other' }]"
+      return-object
+      item-title="name"
+      v-bind="props"
+      v-model="image"
+    />
+  </input-tooltip>
 
   <template v-if="image.name === 'Other'">
     <input-validator
@@ -19,11 +24,17 @@
       :value="flist"
       #="{ props }"
     >
-      <v-text-field label="Flist" v-model="flist" v-bind="props" />
+      <input-tooltip tooltip="Add a custom flist link, you can visit our 0-hub for more information.">
+        <v-text-field label="Flist" v-model="flist" v-bind="props" />
+      </input-tooltip>
     </input-validator>
 
     <input-validator :rules="[validators.required('Entry point is required.')]" :value="entryPoint" #="{ props }">
-      <v-text-field label="Entry Point" v-model="entryPoint" v-bind="props" />
+      <input-tooltip
+        tooltip="The entry point of the selected flist. It's the first process that runs on the machine once it's deployed."
+      >
+        <v-text-field label="Entry Point" v-model="entryPoint" v-bind="props" />
+      </input-tooltip>
     </input-validator>
   </template>
 </template>
diff --git a/packages/playground/src/components/smtp_server.vue b/packages/playground/src/components/smtp_server.vue
index 5faa8ba4bd..70a3648858 100644
--- a/packages/playground/src/components/smtp_server.vue
+++ b/packages/playground/src/components/smtp_server.vue
@@ -5,13 +5,13 @@
       <p v-else>Configure your SMTP Server.</p>
     </v-alert>
 
-    <v-switch
-      inset
-      v-model="$props.modelValue.enabled"
-      label="Toggle SMTP Server Enable"
+    <input-tooltip
       v-if="!persistent"
-      color="primary"
-    />
+      inline
+      tooltip="When the SMTP server is enabled, the system is capable of sending outgoing emails through the SMTP server."
+    >
+      <v-switch color="primary" inset label="Toggle SMTP Server Enable" v-model="$props.modelValue.enabled" />
+    </input-tooltip>
 
     <template v-if="$props.modelValue.enabled || persistent">
       <input-validator
@@ -22,12 +22,12 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="SMTP admin email.">
+        <input-tooltip tooltip="SMTP admin email.">
           <v-text-field
             label="Admin Email"
             placeholder="email@example.com"
             v-model="$props.modelValue.username"
-            v-bind="{ ...props, ...tooltipProps }"
+            v-bind="props"
             autofocus
           />
         </input-tooltip>
@@ -43,12 +43,12 @@
           ]"
           #="{ props: validatorProps }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="SMTP admin password.">
+          <input-tooltip tooltip="SMTP admin password.">
             <v-text-field
               label="Admin Password"
               placeholder="email@example.com"
               v-model="$props.modelValue.password"
-              v-bind="{ ...props, ...tooltipProps }"
+              v-bind="{ ...props, ...validatorProps }"
               autofocus
             />
           </input-tooltip>
@@ -64,12 +64,12 @@
         v-if="email"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="From email address.">
+        <input-tooltip tooltip="From email address.">
           <v-text-field
             label="From Email Address"
             placeholder="email@example.com"
             v-model="$props.modelValue.email"
-            v-bind="{ ...props, ...tooltipProps }"
+            v-bind="props"
             autofocus
           />
         </input-tooltip>
@@ -80,12 +80,12 @@
         :rules="[validators.required('Hostname is required.'), validators.isURL('Please provide a valid hostname.')]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="SMTP host server.">
+        <input-tooltip tooltip="SMTP host server.">
           <v-text-field
             label="Hostname"
             placeholder="email@example.com"
             v-model="$props.modelValue.hostname"
-            v-bind="{ ...props, ...tooltipProps }"
+            v-bind="props"
             autofocus
           />
         </input-tooltip>
@@ -96,28 +96,28 @@
         :rules="[validators.required('Port is required.'), validators.isPort('Please provide a valid port.')]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="SMTP port server.">
-          <v-text-field label="Port" v-model.number="$props.modelValue.port" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="SMTP port server.">
+          <v-text-field label="Port" v-model.number="$props.modelValue.port" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
-      <v-tooltip
-        location="top"
-        text="TLS (Transport Layer Security) is a cryptographic protocol that ensures secure communication over a network. It provides encryption, authentication, and data integrity, making it an essential component for secure deployments."
+      <input-tooltip
+        v-if="tls"
+        #="props"
+        inline
+        tooltip="TLS (Transport Layer Security) is a cryptographic protocol that ensures secure communication over a network. It provides encryption, authentication, and data integrity, making it an essential component for secure deployments."
       >
-        <template v-slot:activator="{ props }">
-          <v-switch inset color="primary" label="Use TLS" v-if="tls" v-bind="props" />
-        </template>
-      </v-tooltip>
+        <v-switch color="primary" inset label="Use TLS" v-bind="props" />
+      </input-tooltip>
 
-      <v-tooltip
-        location="top"
-        text="SSL (Secure Sockets Layer) is an older cryptographic protocol that was widely used for secure communication before being superseded by TLS. SSL and TLS are often used interchangeably, but technically TLS is the successor of SSL."
+      <input-tooltip
+        v-if="ssl"
+        #="props"
+        inline
+        tooltip="SSL (Secure Sockets Layer) is an older cryptographic protocol that was widely used for secure communication before being superseded by TLS. SSL and TLS are often used interchangeably, but technically TLS is the successor of SSL."
       >
-        <template v-slot:activator="{ props }">
-          <v-switch inset color="primary" label="Use SSL" v-if="ssl" v-bind="props" />
-        </template>
-      </v-tooltip>
+        <v-switch color="primary" inset label="Use SSL" v-bind="props" />
+      </input-tooltip>
     </template>
   </div>
 </template>
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 39ee3b6015..92008a743a 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -36,8 +36,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -53,13 +53,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
-            <v-text-field
-              label="CPU (vCores)"
-              type="number"
-              v-model.number="cpu"
-              v-bind="{ ...props, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+            <v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -73,16 +68,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip
-            #="{ tooltipProps }"
-            tooltip="The amount of RAM (Random Access Memory) allocated to your instance."
-          >
-            <v-text-field
-              label="Memory (MB)"
-              type="number"
-              v-model.number="memory"
-              v-bind="{ ...props, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+            <v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -97,53 +84,39 @@
           #="{ props }"
         >
           <input-tooltip
-            #="{ tooltipProps }"
             tooltip="The storage capacity allocated to your instance, indicating the amount of space available to store files, data, and applications."
           >
-            <v-text-field
-              label="Disk Size (GB)"
-              type="number"
-              v-model.number="diskSize"
-              v-bind="{ ...props, ...tooltipProps }"
-            />
+            <v-text-field label="Disk Size (GB)" type="number" v-model.number="diskSize" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
-        <v-tooltip
-          location="top"
-          text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+        <input-tooltip
+          inline
+          tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+        <input-tooltip
+          inline
+          tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Public IPv6" v-model="ipv6" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Public IPv6" v-model="ipv6" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+        <input-tooltip
+          inline
+          tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Planetary Network" v-model="planetary" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Planetary Network" v-model="planetary" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
+        <input-tooltip
+          inline
+          tooltip="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Add Wireguard Access" v-model="wireguard" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Add Wireguard Access" v-model="wireguard" />
+        </input-tooltip>
 
         <v-alert v-show="networkError" class="mb-2" type="warning" variant="tonal">
           You must enable at least one of network options.
@@ -178,8 +151,8 @@
             ]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Disk name.">
-              <v-text-field label="Name" v-model="disks[index].name" v-bind="{ ...props, ...tooltipProps }" />
+            <input-tooltip tooltip="Disk name.">
+              <v-text-field label="Name" v-model="disks[index].name" v-bind="props" />
             </input-tooltip>
           </input-validator>
           <input-validator
@@ -192,13 +165,8 @@
             ]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Disk Size.">
-              <v-text-field
-                label="Size (GB)"
-                type="number"
-                v-model.number="disks[index].size"
-                v-bind="{ ...props, ...tooltipProps }"
-              />
+            <input-tooltip tooltip="Disk Size.">
+              <v-text-field label="Size (GB)" type="number" v-model.number="disks[index].size" v-bind="props" />
             </input-tooltip>
           </input-validator>
         </ExpandableLayout>
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 7377705e5c..6e7d46f12b 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -37,8 +37,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -56,13 +56,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
-            <v-text-field
-              label="CPU (vCores)"
-              type="number"
-              v-model.number="cpu"
-              v-bind="{ ...props, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+            <v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -76,54 +71,38 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip
-            #="{ tooltipProps }"
-            tooltip="The amount of RAM (Random Access Memory) allocated to your instance."
-          >
-            <v-text-field
-              label="Memory (MB)"
-              type="number"
-              v-model.number="memory"
-              v-bind="{ ...props, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+            <v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
-        <v-tooltip
-          location="top"
-          text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+        <input-tooltip
+          inline
+          tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+        <input-tooltip
+          inline
+          tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Public IPv6" v-model="ipv6" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Public IPv6" v-model="ipv6" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+        <input-tooltip
+          inline
+          tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Planetary Network" v-model="planetary" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Planetary Network" v-model="planetary" />
+        </input-tooltip>
 
-        <v-tooltip
-          location="top"
-          text="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
+        <input-tooltip
+          inline
+          tooltip="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Add Wireguard Access" v-model="wireguard" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Add Wireguard Access" v-model="wireguard" />
+        </input-tooltip>
 
         <v-alert v-show="networkError" class="mb-2" type="warning" variant="tonal">
           You must enable at least one of network options.
@@ -156,13 +135,8 @@
             ]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Environment key.">
-              <v-text-field
-                label="Name"
-                v-model="envs[index].key"
-                v-bind="{ ...props, ...tooltipProps }"
-                :disabled="isRequired"
-              />
+            <input-tooltip tooltip="Environment key.">
+              <v-text-field label="Name" v-model="envs[index].key" :disabled="isRequired" v-bind="props" />
             </input-tooltip>
           </input-validator>
 
@@ -171,14 +145,8 @@
             :rules="[validators.required('Value is required.')]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Environment Value.">
-              <v-textarea
-                label="Value"
-                v-model="envs[index].value"
-                no-resize
-                :spellcheck="false"
-                v-bind="{ ...props, ...tooltipProps }"
-              />
+            <input-tooltip tooltip="Environment Value.">
+              <v-textarea label="Value" v-model="envs[index].value" no-resize :spellcheck="false" />
             </input-tooltip>
           </input-validator>
         </ExpandableLayout>
@@ -205,8 +173,8 @@
             ]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Disk name.">
-              <v-text-field label="Name" v-model="disks[index].name" v-bind="{ ...props, ...tooltipProps }" />
+            <input-tooltip tooltip="Disk name.">
+              <v-text-field label="Name" v-model="disks[index].name" v-bind="props" />
             </input-tooltip>
           </input-validator>
           <input-validator
@@ -219,13 +187,8 @@
             ]"
             #="{ props }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Disk Size.">
-              <v-text-field
-                label="Size (GB)"
-                type="number"
-                v-model.number="disks[index].size"
-                v-bind="{ ...props, ...tooltipProps }"
-              />
+            <input-tooltip tooltip="Disk Size.">
+              <v-text-field label="Size (GB)" type="number" v-model.number="disks[index].size" v-bind="props" />
             </input-tooltip>
           </input-validator>
         </ExpandableLayout>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 23a1dd08f8..fb2ccbb42e 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -28,19 +28,18 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
-      <v-tooltip
-        location="top"
-        text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+      <input-tooltip
+        #="{ props }"
+        inline
+        tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
       >
-        <template v-slot:activator="{ props }">
-          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-        </template>
-      </v-tooltip>
+        <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
+      </input-tooltip>
 
       <AlgorandCapacity
         :network="network"
@@ -49,27 +48,31 @@
         v-model:memory.number="memory"
         v-model:storage.number="storage"
       >
-        <v-select
-          label="Network"
-          :items="[
-            { title: 'Mainnet', value: 'mainnet' },
-            { title: 'Testnet', value: 'testnet' },
-            { title: 'Betanet', value: 'betanet' },
-            { title: 'Devnet', value: 'devnet' },
-          ]"
-          v-model="network"
-        />
+        <input-tooltip tooltip="Select a network to work against.">
+          <v-select
+            label="Network"
+            :items="[
+              { title: 'Mainnet', value: 'mainnet' },
+              { title: 'Testnet', value: 'testnet' },
+              { title: 'Betanet', value: 'betanet' },
+              { title: 'Devnet', value: 'devnet' },
+            ]"
+            v-model="network"
+          />
+        </input-tooltip>
 
-        <v-select
-          label="Node Type"
-          :items="[
-            { title: 'Default', value: 'default' },
-            { title: 'Participant', value: 'participant' },
-            { title: 'Relay', value: 'relay' },
-            { title: 'Indexer', value: 'indexer' },
-          ]"
-          v-model="type"
-        />
+        <input-tooltip tooltip="Select node type.">
+          <v-select
+            label="Node Type"
+            :items="[
+              { title: 'Default', value: 'default' },
+              { title: 'Participant', value: 'participant' },
+              { title: 'Relay', value: 'relay' },
+              { title: 'Indexer', value: 'indexer' },
+            ]"
+            v-model="type"
+          />
+        </input-tooltip>
 
         <template v-if="type === 'participant'">
           <input-validator
@@ -83,19 +86,23 @@
             ]"
             #="{ props }"
           >
-            <v-text-field
-              label="Account Mnemonic"
-              placeholder="Algorand Account Mnemonic"
-              v-model.trim="account"
-              v-bind="props"
-              autofocus
-              counter
+            <input-tooltip
+              tooltip="Account mnemonic is the private key of your Algorand wallet and it consists of 24 words "
             >
-              <template #counter>
-                <span :class="{ 'text-red': wordsLength > 25 }">{{ wordsLength }}</span>
-                / 25
-              </template>
-            </v-text-field>
+              <v-text-field
+                label="Account Mnemonic"
+                placeholder="Algorand Account Mnemonic"
+                v-model.trim="account"
+                v-bind="props"
+                autofocus
+                counter
+              >
+                <template #counter>
+                  <span :class="{ 'text-red': wordsLength > 25 }">{{ wordsLength }}</span>
+                  / 25
+                </template>
+              </v-text-field>
+            </input-tooltip>
           </input-validator>
 
           <input-validator
@@ -107,13 +114,15 @@
             ]"
             #="{ props }"
           >
-            <v-text-field
-              label="First Round"
-              placeholder="First Validation Block"
-              v-model.number="firstRound"
-              v-bind="props"
-              type="number"
-            />
+            <input-tooltip tooltip="First Validation Block.">
+              <v-text-field
+                label="First Round"
+                placeholder="First Validation Block"
+                v-model.number="firstRound"
+                v-bind="props"
+                type="number"
+              />
+            </input-tooltip>
           </input-validator>
 
           <input-validator
@@ -126,13 +135,15 @@
             #="{ props }"
             ref="lastRoundInput"
           >
-            <v-text-field
-              label="Last Round"
-              placeholder="Last Validation Block"
-              v-model.number="lastRound"
-              v-bind="props"
-              type="number"
-            />
+            <input-tooltip tooltip="Last Validation Block">
+              <v-text-field
+                label="Last Round"
+                placeholder="Last Validation Block"
+                v-model.number="lastRound"
+                v-bind="props"
+                type="number"
+              />
+            </input-tooltip>
           </input-validator>
         </template>
       </AlgorandCapacity>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 2ecbb732d1..1649accbb3 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -45,8 +45,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Domain name.">
-            <v-text-field label="Domain" v-model="domain" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Domain name.">
+            <v-text-field label="Domain" v-model="domain" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -78,12 +78,8 @@
             ]"
             #="{ props: validationProps }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Instance admin password.">
-              <v-text-field
-                label="Password"
-                v-model="password"
-                v-bind="{ ...props, ...validationProps, ...tooltipProps }"
-              />
+            <input-tooltip tooltip="Instance admin password.">
+              <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validationProps }" />
             </input-tooltip>
           </input-validator>
         </password-input-wrapper>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index da0a99d712..f54cd8a337 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -28,8 +28,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 88b8e1e943..f786617eb0 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -35,8 +35,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
         <input-validator
@@ -47,12 +47,12 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="This email will be used to login to your instance.">
+          <input-tooltip tooltip="This email will be used to login to your instance.">
             <v-text-field
               label="Email"
               placeholder="This email will be used to login to your instance."
               v-model="email"
-              v-bind="{ ...props, ...tooltipProps }"
+              v-bind="props"
             />
           </input-tooltip>
         </input-validator>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 8df190ecf0..db87586bc4 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -28,8 +28,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -45,8 +45,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Funkwhale admin username.">
-          <v-text-field label="Username" v-model="username" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Funkwhale admin username.">
+          <v-text-field label="Username" v-model="username" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -58,12 +58,12 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Funkwhale admin email.">
+        <input-tooltip tooltip="Funkwhale admin email.">
           <v-text-field
             placeholder="This email will be used to login to your instance."
             label="Email"
             v-model="email"
-            v-bind="{ ...props, ...tooltipProps }"
+            v-bind="props"
           />
         </input-tooltip>
       </input-validator>
@@ -78,12 +78,8 @@
           ]"
           #="{ props: validatorProps }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Funkwhale admin password.">
-            <v-text-field
-              label="Password"
-              v-model="password"
-              v-bind="{ ...props, ...validatorProps, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="Funkwhale admin password.">
+            <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
           </input-tooltip>
         </input-validator>
       </password-input-wrapper>
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index 053795744d..7db9e32571 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -41,8 +41,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="{ ...props }" />
           </input-tooltip>
         </input-validator>
 
@@ -58,14 +58,9 @@
         >
           <password-input-wrapper #="{ props }">
             <input-tooltip
-              #="{ tooltipProps }"
               tooltip="The Kubernetes Cluster Token is a specially generated authentication token used for accessing and managing a Kubernetes cluster."
             >
-              <v-text-field
-                label="Cluster Token"
-                v-bind="{ ...props, ...validationProps, ...tooltipProps }"
-                v-model="clusterToken"
-              />
+              <v-text-field label="Cluster Token" v-bind="{ ...props, ...validationProps }" v-model="clusterToken" />
             </input-tooltip>
           </password-input-wrapper>
         </input-validator>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 8f37f2893b..8cc3dae263 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -34,8 +34,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 2b567029b1..6c4f3ba86d 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -22,8 +22,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -37,13 +37,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
-          <v-text-field
-            label="CPU (vCores)"
-            type="number"
-            v-model.number="cpu"
-            v-bind="{ ...props, ...tooltipProps }"
-          />
+        <input-tooltip tooltip="The number of virtual cores allocated to your instance.">
+          <v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -57,16 +52,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip
-          #="{ tooltipProps }"
-          tooltip="The amount of RAM (Random Access Memory) allocated to your instance."
-        >
-          <v-text-field
-            label="Memory (MB)"
-            type="number"
-            v-model.number="memory"
-            v-bind="{ ...props, ...tooltipProps }"
-          />
+        <input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
+          <v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 5a92246c46..d464e93bcc 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -35,8 +35,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -52,8 +52,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="OwnCloud admin username.">
-            <v-text-field label="Username" v-model="username" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="OwnCloud admin username.">
+            <v-text-field label="Username" v-model="username" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -67,12 +67,8 @@
             ]"
             #="{ props: validatorProps }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="OwnCloud admin password.">
-              <v-text-field
-                label="Password"
-                v-model="password"
-                v-bind="{ ...props, ...tooltipProps, ...validatorProps }"
-              />
+            <input-tooltip tooltip="OwnCloud admin password.">
+              <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
             </input-tooltip>
           </input-validator>
         </password-input-wrapper>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index bb8e640118..8caa490913 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -27,8 +27,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -40,8 +40,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Peertube admin email.">
-          <v-text-field label="Admin Email" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Peertube admin email.">
+          <v-text-field label="Admin Email" v-model="email" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -55,12 +55,8 @@
           ]"
           #="{ props: validatorProps }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Peertube admin password.">
-            <v-text-field
-              label="Admin Password"
-              v-model="password"
-              v-bind="{ ...props, ...validatorProps, ...tooltipProps }"
-            />
+          <input-tooltip tooltip="Peertube admin password.">
+            <v-text-field label="Admin Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
           </input-tooltip>
         </input-validator>
       </password-input-wrapper>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 9c98890070..8d83af7fa7 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -37,8 +37,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -51,33 +51,27 @@
           #="{ props }"
         >
           <password-input-wrapper>
-            <input-tooltip #="{ tooltipProps }" tooltip="Presearch Registeration Code.">
-              <v-text-field
-                label="Presearch Registeration Code"
-                v-bind="{ ...props, ...tooltipProps }"
-                v-model="code"
-              />
+            <input-tooltip tooltip="Presearch Registeration Code.">
+              <v-text-field label="Presearch Registeration Code" v-bind="props" v-model="code" />
             </input-tooltip>
           </password-input-wrapper>
         </input-validator>
 
-        <v-tooltip
-          location="top"
-          text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+        <input-tooltip
+          #="props"
+          tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+          inline
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-          </template>
-        </v-tooltip>
-
-        <v-tooltip
-          location="top"
-          text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
+        </input-tooltip>
+
+        <input-tooltip
+          #="props"
+          inline
+          tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
         >
-          <template v-slot:activator="{ props }">
-            <v-switch color="primary" inset label="Planetary Network" v-model="planetary" v-bind="props" />
-          </template>
-        </v-tooltip>
+          <v-switch color="primary" inset label="Planetary Network" v-model="planetary" v-bind="props" />
+        </input-tooltip>
 
         <v-alert v-show="networkError" class="mb-2" type="warning" variant="tonal">
           You must enable at least one of network options.
@@ -96,29 +90,15 @@
 
       <template #restore>
         <input-tooltip
-          #="{ tooltipProps }"
           tooltip="The Private Presearch Restore Key is a unique cryptographic key associated with your Presearch account."
         >
-          <v-textarea
-            label="Private Presearch Restore Key"
-            v-bind="{ ...tooltipProps }"
-            v-model="privateRestoreKey"
-            no-resize
-            :spellcheck="false"
-          />
+          <v-textarea label="Private Presearch Restore Key" v-model="privateRestoreKey" no-resize :spellcheck="false" />
         </input-tooltip>
 
         <input-tooltip
-          #="{ tooltipProps }"
           tooltip="The Public Presearch Restore Key is a unique cryptographic key associated with your Presearch account."
         >
-          <v-textarea
-            label="Public Presearch Restore Key"
-            v-bind="{ ...tooltipProps }"
-            v-model="publicRestoreKey"
-            no-resize
-            :spellcheck="false"
-          />
+          <v-textarea label="Public Presearch Restore Key" v-model="publicRestoreKey" no-resize :spellcheck="false" />
         </input-tooltip>
       </template>
     </d-tabs>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 7737f159d8..6c7cc24efc 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -29,8 +29,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -42,19 +42,17 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Subsquid websockt endpoint.">
-          <v-text-field label="Websockt Endpoint" v-model="endpoint" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Subsquid websockt endpoint.">
+          <v-text-field label="Websockt Endpoint" v-model="endpoint" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
-      <v-tooltip
-        location="top"
-        text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+      <input-tooltip
+        inline
+        tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
       >
-        <template v-slot:activator="{ props }">
-          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-        </template>
-      </v-tooltip>
+        <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" />
+      </input-tooltip>
 
       <SelectSolutionFlavor
         v-model="solution"
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index f8bda578b3..90aba668be 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -35,8 +35,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Instance name.">
+            <v-text-field label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -52,8 +52,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Admin username.">
-            <v-text-field label="Username" v-model="username" v-bind="{ ...props, ...tooltipProps }" />
+          <input-tooltip tooltip="Admin username.">
+            <v-text-field label="Username" v-model="username" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -67,12 +67,8 @@
             ]"
             #="{ props: validatorProps }"
           >
-            <input-tooltip #="{ tooltipProps }" tooltip="Admin password.">
-              <v-text-field
-                label="Password"
-                v-model="password"
-                v-bind="{ ...props, ...validatorProps, ...tooltipProps }"
-              />
+            <input-tooltip tooltip="Admin password.">
+              <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
             </input-tooltip>
           </input-validator>
         </password-input-wrapper>
@@ -85,8 +81,8 @@
           ]"
           #="{ props }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Admin email.">
-            <v-text-field label="Email" v-bind="{ ...props, ...tooltipProps }" v-model="email" />
+          <input-tooltip tooltip="Admin email.">
+            <v-text-field label="Email" v-bind="props" v-model="email" />
           </input-tooltip>
         </input-validator>
 
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index af2ec71c06..1d3987d91e 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -29,8 +29,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -46,8 +46,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Umbrel admin username.">
-          <v-text-field label="Username" v-model="username" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Umbrel admin username.">
+          <v-text-field label="Username" v-model="username" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -61,24 +61,19 @@
           ]"
           #="{ props: validatorProps }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Umbrel admin password.">
-            <v-text-field
-              label="Password"
-              v-model="password"
-              v-bind="{ ...props, ...tooltipProps, ...validatorProps }"
-            />
+          <input-tooltip tooltip="Umbrel admin password.">
+            <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
           </input-tooltip>
         </input-validator>
       </password-input-wrapper>
 
-      <v-tooltip
-        location="top"
-        text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+      <input-tooltip
+        #="props"
+        inline
+        tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
       >
-        <template v-slot:activator="{ props }">
-          <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
-        </template>
-      </v-tooltip>
+        <v-switch color="primary" inset label="Public IPv4" v-model="ipv4" v-bind="props" />
+      </input-tooltip>
 
       <SelectSolutionFlavor
         v-model="solution"
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 2d41e07579..86aacf1cf1 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -28,8 +28,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Instance name.">
-          <v-text-field label="Name" v-model="name" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
@@ -45,8 +45,8 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Wordpress admin username.">
-          <v-text-field label="Username" v-model="username" v-bind="{ ...props, ...tooltipProps }" />
+        <input-tooltip tooltip="Wordpress admin username.">
+          <v-text-field label="Username" v-model="username" v-bind="{ ...props }" />
         </input-tooltip>
       </input-validator>
 
@@ -60,12 +60,8 @@
           ]"
           #="{ props: validatorProps }"
         >
-          <input-tooltip #="{ tooltipProps }" tooltip="Wordpress admin password.">
-            <v-text-field
-              label="Password"
-              v-model="password"
-              v-bind="{ ...props, ...tooltipProps, ...validatorProps }"
-            />
+          <input-tooltip tooltip="Wordpress admin password.">
+            <v-text-field label="Password" v-model="password" v-bind="{ ...props, ...validatorProps }" />
           </input-tooltip>
         </input-validator>
       </password-input-wrapper>
@@ -78,12 +74,12 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip #="{ tooltipProps }" tooltip="Wordpress admin email.">
+        <input-tooltip tooltip="Wordpress admin email.">
           <v-text-field
             label="Email"
             placeholder="This email will be used to login to your instance."
             v-model="email"
-            v-bind="{ ...props, ...tooltipProps }"
+            v-bind="{ ...props }"
           />
         </input-tooltip>
       </input-validator>