From b49292d566f9c22bc613cd4adb09216ab1c27f37 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Fri, 20 Oct 2023 12:18:42 -0400
Subject: [PATCH 1/4] feat(ktooltip): hide tooltip if no label or content

---
 docs/components/tooltip.md           | 48 ++++++++++++++++++++++++----
 src/components/KTooltip/KTooltip.vue | 33 +++++++++++++------
 2 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 82a920543b..4d8aecadf7 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -16,9 +16,7 @@
 
 ### label
 
-Here you can pass in the text to display in the toolip.
-
-- `I am a new sample label`
+Here you can pass in the text to display in the tooltip.
 
 <KTooltip label="I am a new sample label">
   <KButton>Sample Button</KButton>
@@ -30,8 +28,28 @@ Here you can pass in the text to display in the toolip.
 </KTooltip>
 ```
 
+When using the `label` prop (or the [`content` slot](#content)), passing a value of `undefined`, an empty string, or no `content` slot content will prevent the tooltip from showing, while still displaying your `default` slot content.
+
+<KTooltip :label="labelProptooltipText">
+  <KButton>Hover me</KButton>
+</KTooltip>
+
+```html
+<KTooltip :label="tooltipLabel">
+  <KButton>Hover me</KButton>
+</KTooltip>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// The tooltip doesn't have label text yet,
+// so hovering over the button will not render an empty tooltip
+const tooltipLabel = ref<string>('')
+</script>
+```
+
 :::warning NOTE
-KTooltip won't be triggered if the element you pass through `default` slot has `disabled` attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below. 
+KTooltip won't be triggered if the element you pass through `default` slot has `disabled` attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below.
 :::
 
 <KCard>
@@ -131,7 +149,9 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid
 
 ## Slots
 
-- `Default` There is a main slot that takes in the element you want the popover to be triggered over.
+### default
+
+The `default` slot takes in the element you want the popover to be triggered over.
 
 ```html
 <KTooltip label="a cool label">
@@ -140,7 +160,9 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid
 </KTooltip>
 ```
 
-- `Content` This allows you to slot in any html content
+### content
+
+The content slot allows you to slot in any html content
 
 <KTooltip label="Video Games">
   <KButton>&nbsp;✌🏻</KButton>
@@ -186,6 +208,20 @@ Example:
 </style>
 ```
 
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const labelProptooltipText = ref<string>('')
+
+const toggleTooltipLabel = () => {
+  if (!labelProptooltipText.value) {
+    labelProptooltipText.value = 'Here I am!'
+  } else {
+    labelProptooltipText.value = ''
+  }
+}
+</script>
+
 <style>
 .tooltip-blue {
   --KTooltipBackground: blue;
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index b0d976ec68..6994c820cf 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -4,7 +4,7 @@
     hide-caret
     :max-width="maxWidth"
     :placement="placement"
-    :popover-classes="`k-tooltip ${computedClass} ${className}`"
+    :popover-classes="`k-tooltip ${computedClass}`"
     :popover-timeout="0"
     :position-fixed="positionFixed"
     :test-mode="!!testMode || undefined"
@@ -13,7 +13,10 @@
   >
     <slot />
 
-    <template #content>
+    <template
+      v-if="showTooltip"
+      #content
+    >
       <div role="tooltip">
         <slot
           :label="label"
@@ -27,8 +30,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue'
 import type { PropType } from 'vue'
-import { computed, ref } from 'vue'
 import KPop from '@/components/KPop/KPop.vue'
 import type { PopPlacements } from '@/types'
 import { PopPlacementsArray } from '@/types'
@@ -76,25 +79,31 @@ const props = defineProps({
   },
 })
 
-const className = ref('')
+const slots = useSlots()
+const showTooltip = computed((): boolean => !!props.label || !!slots.content)
+
 const computedClass = computed((): string => {
-  let result = ''
+  const result = []
   switch (props.placement) {
     case 'top':
-      result = 'k-tooltip-top'
+      result.push('k-tooltip-top')
       break
     case 'right':
-      result = 'k-tooltip-right'
+      result.push('k-tooltip-right')
       break
     case 'bottom':
-      result = 'k-tooltip-bottom'
+      result.push('k-tooltip-bottom')
       break
     case 'left':
-      result = 'k-tooltip-left'
+      result.push('k-tooltip-left')
       break
   }
 
-  return result
+  if (!showTooltip.value) {
+    result.push('k-tooltip-hidden')
+  }
+
+  return result.join(' ')
 })
 </script>
 
@@ -111,6 +120,10 @@ const computedClass = computed((): string => {
   --KPopBorder: none;
   pointer-events: none;
   z-index: 9999;
+
+  &.k-tooltip-hidden {
+    display: none;
+  }
 }
 
 .k-tooltip-top {

From 95a26367feb1ae9987948654561707501cbf197b Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Fri, 20 Oct 2023 12:48:35 -0400
Subject: [PATCH 2/4] docs: remove disabled note

---
 docs/components/button.md  | 30 --------------------------
 docs/components/tooltip.md | 43 ++------------------------------------
 2 files changed, 2 insertions(+), 71 deletions(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index 5a9bb841e7..9a26582143 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -154,36 +154,6 @@ KButton also supports the disabled attribute with both Button and Anchor types.
 <KButton to="http://google.com" appearance="btn-link" disabled>Disabled Native Anchor Link</KButton>
 ```
 
-:::warning NOTE
-Should you need to use a KTooltip component on a KButton with `disabled` attribute, don't forget to wrap an additional tag around your KButton, like shown in the example below. Otherwise KTooltip won't be triggered since elements with `disabled` attribute don't trigger pointer events.
-:::
-
-<KCard>
-  <template #body>
-    <div class="spacing-container">
-      <KTooltip label="I won't pop up">
-        <KButton disabled>❌</KButton>
-      </KTooltip>
-      <KTooltip label="I will pop up">
-        <span>
-          <KButton disabled>✅</KButton>
-        </span>
-      </KTooltip>
-    </div>
-  </template>
-</KCard>
-
-```html
-<KTooltip label="I won't show up">
-  <KButton disabled>❌</KButton>
-</KTooltip>
-<KTooltip label="I will pop up">
-  <span>
-    <KButton disabled>✅</KButton>
-  </span>
-</KTooltip>
-```
-
 ## Slots
 
 ### Icon
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 4d8aecadf7..e9277ffb67 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -31,12 +31,12 @@ Here you can pass in the text to display in the tooltip.
 When using the `label` prop (or the [`content` slot](#content)), passing a value of `undefined`, an empty string, or no `content` slot content will prevent the tooltip from showing, while still displaying your `default` slot content.
 
 <KTooltip :label="labelProptooltipText">
-  <KButton>Hover me</KButton>
+  <KButton>My tooltip label is empty</KButton>
 </KTooltip>
 
 ```html
 <KTooltip :label="tooltipLabel">
-  <KButton>Hover me</KButton>
+  <KButton>My tooltip label is empty</KButton>
 </KTooltip>
 
 <script setup lang="ts">
@@ -48,45 +48,6 @@ const tooltipLabel = ref<string>('')
 </script>
 ```
 
-:::warning NOTE
-KTooltip won't be triggered if the element you pass through `default` slot has `disabled` attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below.
-:::
-
-<KCard>
-  <template #body>
-    <div class="my-tooltip">
-      <KTooltip label="I won't pop up" class="my-tooltip-label">
-        <KButton disabled>❌</KButton>
-      </KTooltip>
-      <KTooltip label="I will pop up">
-        <span>
-          <KButton disabled>✅</KButton>
-        </span>
-      </KTooltip>
-    </div>
-  </template>
-</KCard>
-
-<style>
-.my-tooltip {
-  display: flex !important;
-}
-.my-tooltip-label {
-  margin-right: 4px !important;
-}
-</style>
-
-```html
-<KTooltip label="I won't show up">
-  <KButton disabled>❌</KButton>
-</KTooltip>
-<KTooltip label="I will pop up">
-  <span>
-    <KButton disabled>✅</KButton>
-  </span>
-</KTooltip>
-```
-
 ### placement
 
 This is where the tooltip will appear - by default it appears on top.

From 00f1a6a23eb5af114ba7611b18cc929f3b48c86a Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Fri, 20 Oct 2023 12:54:18 -0400
Subject: [PATCH 3/4] test: add prop test

---
 src/components/KTooltip/KTooltip.cy.ts | 29 +++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index f3169cc7a6..533a0e4df8 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -1,5 +1,6 @@
 import { mount } from 'cypress/vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
+import { h } from 'vue'
 
 const positions = ['top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'right', 'rightStart', 'rightEnd', 'bottom', 'bottomStart', 'bottomEnd']
 
@@ -13,19 +14,45 @@ const positions = ['top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd',
  */
 const rendersCorrectPosition = (variant: string) => {
   it(`renders tooltip to the ${variant} side`, () => {
+    const text = 'Button text'
+
     mount(KTooltip, {
       props: {
         testMode: true,
         placement: variant,
         label: `I'm on the ${variant} side!`,
+        trigger: 'click',
+      },
+      slots: {
+        default: () => h('button', {}, text),
       },
     })
 
-    cy.get('.k-tooltip').should('have.text', `I'm on the ${variant} side!`)
+    cy.get('button').click()
+
+    cy.get('.k-tooltip').should('be.visible').and('not.have.class', 'k-tooltip-hidden').and('have.text', `I'm on the ${variant} side!`)
   })
 }
 
 describe('KTooltip', () => {
   // Loop through varients
   positions.map(p => rendersCorrectPosition(p))
+
+  it('does not render the tooltip if the `label` prop is empty', () => {
+    const text = 'Button text'
+
+    mount(KTooltip, {
+      props: {
+        testMode: true,
+        trigger: 'click',
+      },
+      slots: {
+        default: () => h('button', {}, 'text'),
+      },
+    })
+
+    cy.get('button').click()
+
+    cy.get('.k-tooltip').should('have.class', 'k-tooltip-hidden').and('not.be.visible')
+  })
 })

From ddc778e77d0f54b67f11e0967511e68832b033ab Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Fri, 20 Oct 2023 13:04:53 -0400
Subject: [PATCH 4/4] test: use var

---
 src/components/KTooltip/KTooltip.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index 533a0e4df8..d08873c7cc 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -47,7 +47,7 @@ describe('KTooltip', () => {
         trigger: 'click',
       },
       slots: {
-        default: () => h('button', {}, 'text'),
+        default: () => h('button', {}, text),
       },
     })