Development support tooltip

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>

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>

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>
 

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,
     };
   },
 };

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"

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>

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>

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>