fix(ktooltip): keep tiooltip open on content hover (#2044)

* fix(ktooltip): keep tiooltip open on content hover * fix(ktooltip): minor fix * fix(ktooltip): minor fix * fix(ktooltip): fix slotted a styling * fix(kexternallink): icon size
Kong · Mar 1, 2024 · d07169f · d07169f
1 parent 7648f1a
commit d07169f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/sandbox/pages/SandboxLabel.vue b/sandbox/pages/SandboxLabel.vue
@@ -49,7 +49,26 @@
         </KLabel>
       </SandboxSectionComponent>
 
-      <!-- Props -->
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="tooltip">
+        <KLabel>
+          Label
+          <template #tooltip>
+            <KExternalLink
+              href="https://kongponents.konghq.com/"
+              target="_blank"
+            >
+              External link
+            </KExternalLink> inside of a tooltip
+          </template>
+        </KLabel>
+      </SandboxSectionComponent>
+
+      <!-- Usage -->
       <SandboxTitleComponent
         is-subtitle
         title="Usage"

diff --git a/src/components/KExternalLink/KExternalLink.vue b/src/components/KExternalLink/KExternalLink.vue
@@ -9,14 +9,14 @@
     <slot />
     <ExternalLinkIcon
       v-if="!hideIcon"
-      :size="KUI_ICON_SIZE_40"
+      :size="KUI_ICON_SIZE_30"
     />
   </a>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import { isValidUrl } from '@/utilities/urls'
 import { ExternalLinkIcon } from '@kong/icons'
 

diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
@@ -6,7 +6,7 @@
     :max-width="maxWidth"
     :placement="placement"
     :popover-classes="`k-tooltip ${computedClass}`"
-    :popover-timeout="0"
+    :popover-timeout="100"
     :position-fixed="positionFixed"
     trigger="hover"
     width="auto"
@@ -82,6 +82,7 @@ const props = defineProps({
 })
 
 const slots = useSlots()
+
 const showTooltip = computed((): boolean => !!props.text || !!props.label || !!slots.content)
 
 const computedClass = computed((): string => {
@@ -113,7 +114,6 @@ const computedClass = computed((): string => {
   font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
   line-height: var(--kui-line-height-20, $kui-line-height-20);
   padding: var(--kui-space-30, $kui-space-30);
-  pointer-events: none;
   z-index: 9999;
 
   &.tooltip-top {
@@ -135,5 +135,21 @@ const computedClass = computed((): string => {
   code {
     color: var(--kui-color-text-decorative-aqua, $kui-color-text-decorative-aqua);
   }
+
+  a {
+    color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+
+    &:hover {
+      color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker);
+    }
+
+    &:focus-visible {
+      color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+    }
+
+    &:active {
+      color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+    }
+  }
 }
 </style>