add tooltip for radio's options label

Author: thule129

src/Demo.vue

@@ -18,6 +18,17 @@ div
           v-tooltip="option.tooltip"
           style="width: 16px; height: 16px; margin-left: 5px;"
         )
+      template(
+        v-for="option, index in option.options" 
+        :key="smallOption.id" 
+        v-slot:[`radioTooltip_${index}`]
+      )
+        img(
+            src="./assets/icons/question.svg"
+            v-if="option.tooltip"
+            v-tooltip="option.tooltip"
+            style="width: 16px; height: 16px; margin-left: 5px;"
+          )
 
   pre {{ data }}
 </template>

src/VField.vue

@@ -5,6 +5,14 @@ component(
 )
   template(#tooltip)
     slot(name="tooltip")
+  template(
+    v-for="option, index in option.options" 
+    :key="index"
+    v-slot:[`radioTooltip_${index}`]
+  )
+    slot(
+      :name="`radioTooltip_${index}`"
+    )
   template(
     v-for="slot, index in option.slots",
     :key="index",

src/components/Radio/Radio.vue

@@ -2,7 +2,7 @@
 extends ../Base/InputBase.pug
 block input
   .vfield__radio-wrapper
-    .vfield__check(v-for="option in options")
+    .vfield__check(v-for="option, index in options")
         input.vfield__check-input(
             type='radio'
             :name='name'
@@ -14,6 +14,9 @@ block input
         label.vfield__check-label(
             :for="`${group ? group + '-' : ''}${name}-${option.value}`"
         ) {{option.label}}
+          slot(
+            :name="`radioTooltip_${index}`"
+          )
 </template>
 <script lang="ts" setup>
 import { useLocalValue, useFieldId, useFieldClass } from '@/utilities/hooks';