Fix disabled radio button tooltip

Show the tooltip for a disabled radio button also while hovering over the component itself. Not only on the label behind it. Signed-off-by: Tatjana Dehler <tdehler@suse.com>
rancher-sandbox · Jul 7, 2023 · c66f7cd · c66f7cd
1 parent dcb08a7
commit c66f7cd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/pkg/rancher-desktop/components/MountTypeSelector.vue b/pkg/rancher-desktop/components/MountTypeSelector.vue
@@ -138,6 +138,7 @@ export default Vue.extend({
               >
                 <radio-button
                   :key="groupName+'-'+index"
+                  v-tooltip="disabledVirtIoFsTooltip(option.disabled)"
                   :name="groupName"
                   :value="preferences.experimental.virtualMachine.mount.type"
                   :label="option.label"
@@ -148,15 +149,11 @@ export default Vue.extend({
                   @input="updateValue('experimental.virtualMachine.mount.type', $event)"
                 >
                   <template #label>
-                    <div
-                      v-tooltip="disabledVirtIoFsTooltip(option.disabled)"
-                    >
-                      {{ option.label }}
-                      <labeled-badge
-                        v-if="option.experimental"
-                        :text="t('prefs.experimental')"
-                      />
-                    </div>
+                    {{ option.label }}
+                    <labeled-badge
+                      v-if="option.experimental"
+                      :text="t('prefs.experimental')"
+                    />
                   </template>
                 </radio-button>
               </template>

diff --git a/pkg/rancher-desktop/components/Preferences/VirtualMachineEmulation.vue b/pkg/rancher-desktop/components/Preferences/VirtualMachineEmulation.vue
@@ -104,6 +104,7 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
               >
                 <radio-button
                   :key="groupName+'-'+index"
+                  v-tooltip="disabledVmTypeTooltip(option.disabled)"
                   :name="groupName"
                   :value="preferences.experimental.virtualMachine.type"
                   :label="option.label"
@@ -114,15 +115,11 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
                   @input="onChange('experimental.virtualMachine.type', $event)"
                 >
                   <template #label>
-                    <div
-                      v-tooltip="disabledVmTypeTooltip(option.disabled)"
-                    >
-                      {{ option.label }}
-                      <labeled-badge
-                        v-if="option.experimental"
-                        :text="t('prefs.experimental')"
-                      />
-                    </div>
+                    {{ option.label }}
+                    <labeled-badge
+                      v-if="option.experimental"
+                      :text="t('prefs.experimental')"
+                    />
                   </template>
                 </radio-button>
               </template>