fix(kinputswitch): add tooltipattributes prop (#2613)

* fix(kinputswitch): add tooltipattributes prop * fix: address pr feedback
Kong · Feb 12, 2025 · 89c8ff9 · 89c8ff9
1 parent 490ee94
commit 89c8ff9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/docs/components/input-switch.md b/docs/components/input-switch.md
@@ -64,6 +64,10 @@ Use this prop to display tooltip text when KInputSwitch is disabled.
 <KInputSwitch disabled disabled-tooltip-text="Scale down this cluster first to enable editing" v-model="switchValue" />
 ```
 
+### tooltipAttributes
+
+Use the `tooltipAttributes` prop to configure the KTooltip's [props](/components/tooltip) when using the `disabledTooltipText` prop.
+
 ### HTML Attributes
 
 #### disabled

diff --git a/sandbox/pages/SandboxInputSwitch.vue b/sandbox/pages/SandboxInputSwitch.vue
@@ -43,12 +43,13 @@
           label="Disabled"
         />
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="disabledTooltipText">
+      <SandboxSectionComponent title="disabledTooltipText & tooltipAttributes">
         <KInputSwitch
           v-model="vModel1"
           disabled
           disabled-tooltip-text="Disabled tooltip text"
           label="Disabled"
+          :tooltip-attributes="{ placement: 'bottom-start' }"
         />
       </SandboxSectionComponent>
 

diff --git a/src/components/KInputSwitch/KInputSwitch.vue b/src/components/KInputSwitch/KInputSwitch.vue
@@ -13,10 +13,10 @@
       type="checkbox"
       @input="handleChange"
     >
-    <component
-      :is="disabled && disabledTooltipText ? 'KTooltip' : 'div'"
+    <KTooltip
+      v-bind="disabled && disabledTooltipText ? tooltipAttributes : {}"
       class="switch-control-wrapper"
-      :label="disabledTooltipText"
+      :text="disabled ? disabledTooltipText : ''"
     >
       <span
         :aria-checked="modelValue"
@@ -34,7 +34,7 @@
         <!-- white vertical bar that is visible when switch is enabled -->
         <span class="switch-control-enabled-bar" />
       </span>
-    </component>
+    </KTooltip>
 
     <KLabel
       v-if="label || $slots.label"
@@ -50,6 +50,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { computed, ref, useAttrs, useId } from 'vue'
+import type { TooltipAttributes } from '@/types'
 
 const props = defineProps({
   /**
@@ -80,6 +81,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  tooltipAttributes: {
+    type: Object as PropType<TooltipAttributes>,
+    default: () => ({}),
+  },
   /**
    * Whether the label should be placed before the switch
    */