From 0a7cc99647075d39e6c777a44251f64a75344ff3 Mon Sep 17 00:00:00 2001
From: RytisTarasevicius <139129643+RytisTarasevicius@users.noreply.github.com>
Date: Fri, 21 Jun 2024 00:35:56 +0300
Subject: [PATCH 1/5] Update Tooltip.vue

Added option to set tooltip label with clickable html elements, added delay
---
 src/components/Tooltip/Tooltip.vue | 79 +++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 00aab9f6..ab8097ca 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -2,15 +2,21 @@
     <div class="tooltip">
         <div ref="target" class="target" @mouseenter="onMouseEnter"
              @mouseleave="onMouseLeave">
-            <slot/>
+            <slot />
+            <transition name="fade">
+                <Popper v-if="show" ref="popper" :transition-delay="0"
+                        :boundaries-element="boundariesElement"
+                        :target-element="$refs.target" :placement="placement" :offset="offset">
+                    <span ref="label" class="label" :disabled="disabled" @mouseenter="onMouseEnter"
+                          @mouseleave="onMouseLeave">
+                        <slot name="label"></slot>
+                    </span>
+                    <span v-if=label ref="label" class="label no-click" :disabled="disabled">
+                       {{ label }}
+                    </span>
+                </Popper>
+            </transition>
         </div>
-        <transition name="fade">
-            <Popper v-if="show" ref="popper" :transition-delay="300"
-                    :boundaries-element="boundariesElement"
-                    :target-element="$refs.target" :placement="placement" :offset="offset">
-                <span ref="label" class="label" :disabled="disabled">{{ label }}</span>
-            </Popper>
-        </transition>
     </div>
 </template>
 
@@ -23,48 +29,60 @@
         props: {
             label: {
                 type: String,
-                required: true
             },
             placement: {
                 type: String,
-                default: 'bottom'
+                default: 'bottom',
             },
             disabled: {
                 type: Boolean,
-                default: false
+                default: false,
             },
             offset: {
                 type: String,
-                default: '0,5'
+                default: '0,5',
             },
             appendToBody: {
                 type: Boolean,
-                default: false
+                default: false,
             },
             boundariesElement: {
                 type: String,
-                default: 'viewport'
-            }
+                default: 'viewport',
+            },
+            delay: {
+                type: Number,
+                default: 0,
+            },
         },
         data() {
             return {
-                show: false
+                mouseEntered: false,
+                show: false,
             };
         },
         methods: {
             onMouseEnter() {
-                this.show = true;
-                if (this.appendToBody) {
-                    this.$nextTick(() => {
-                        this.append();
-                    });
-                }
+                this.mouseEntered = true;
+                setTimeout(() => {
+                    if (!this.mouseEntered) return;
+                    this.show = true;
+                    if (this.appendToBody) {
+                        this.$nextTick(() => {
+                            this.append();
+                        });
+                    }
+                }, this.delay);
             },
             onMouseLeave() {
-                if (this.appendToBody) {
-                    document.body.removeChild(this.$refs.label);
-                }
-                this.show = false;
+                this.mouseEntered = false;
+                setTimeout(() => {
+                    if (this.mouseEntered) return;
+                    if (this.appendToBody) {
+                        document.body.removeChild(this.$refs.label);
+                    }
+                    this.show = false;
+                }, this.delay);
             },
             append() {
                 document.body.appendChild(this.$refs.label);
@@ -73,8 +91,8 @@
                         this.$refs.popper.update();
                     }
                 }, 0);
-            }
-        }
+            },
+        },
     };
 </script>
 
@@ -92,12 +110,15 @@
     font-weight: 400;
     box-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2);
     white-space: nowrap;
-    pointer-events: none;
     border-radius: 3px;
     background-color: var(--ds-background-neutral-bold, #172b4d);
     color: var(--ds-text-inverse, #FFF);
 }
 
+.no-click {
+    pointer-events: none;
+}
+
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.3s;

From cbdb424760e03534b95c34d4cc3b2504b8ea4736 Mon Sep 17 00:00:00 2001
From: RytisTarasevicius <139129643+RytisTarasevicius@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:37:32 +0300
Subject: [PATCH 2/5] Update Tooltip.vue

---
 src/components/Tooltip/Tooltip.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index ab8097ca..0250a488 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -7,13 +7,13 @@
                 <Popper v-if="show" ref="popper" :transition-delay="0"
                         :boundaries-element="boundariesElement"
                         :target-element="$refs.target" :placement="placement" :offset="offset">
-                    <span ref="label" class="label" :disabled="disabled" @mouseenter="onMouseEnter"
-                          @mouseleave="onMouseLeave">
-                        <slot name="label"></slot>
-                    </span>
                     <span v-if=label ref="label" class="label no-click" :disabled="disabled">
                        {{ label }}
                     </span>
+                    <span v-else ref="label" class="label" :disabled="disabled" @mouseenter="onMouseEnter"
+                          @mouseleave="onMouseLeave">
+                        <slot name="label"></slot>
+                    </span>
                 </Popper>
             </transition>
         </div>

From 1ffcb5d1e7264297c788dc5f044a74102d96a84f Mon Sep 17 00:00:00 2001
From: RytisTarasevicius <139129643+RytisTarasevicius@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:38:24 +0300
Subject: [PATCH 3/5] Create TooltipWithHtmlLabel.story.vue

---
 .../Tooltip/TooltipWithHtmlLabel.story.vue    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 stories/Tooltip/TooltipWithHtmlLabel.story.vue

diff --git a/stories/Tooltip/TooltipWithHtmlLabel.story.vue b/stories/Tooltip/TooltipWithHtmlLabel.story.vue
new file mode 100644
index 00000000..ff6382b3
--- /dev/null
+++ b/stories/Tooltip/TooltipWithHtmlLabel.story.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="buttons-group">
+        <Tooltip
+            v-for="placement in placements"
+            :key="placement"
+            delay=500
+            :placement="placement">
+            <template #label>
+                <b>I support html elements </b> &#128540;
+            </template>
+            <Button>Hover over me!</Button>
+        </Tooltip>
+    </div>
+</template>
+
+<script>
+    import Tooltip from '@/components/Tooltip/Tooltip';
+    import Button from '@/components/Button/Button';
+
+    export default {
+        name: 'TooltipWithHtmlLabelStory',
+        components: { Tooltip, Button },
+        data() {
+            return {
+                placements: ['top', 'right', 'bottom', 'left']
+            };
+        }
+    };
+</script>
+<style scoped>
+.buttons-group {
+  max-width: 800px;
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

From 280db1deefb305f9dbd62590f509ef4957f971a3 Mon Sep 17 00:00:00 2001
From: RytisTarasevicius <139129643+RytisTarasevicius@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:48:36 +0300
Subject: [PATCH 4/5] Update Tooltip.vue

---
 src/components/Tooltip/Tooltip.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 0250a488..2d254f5e 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -57,15 +57,14 @@
         },
         data() {
             return {
-                mouseEntered: false,
+                timeoutId: undefined,
                 show: false,
             };
         },
         methods: {
             onMouseEnter() {
-                this.mouseEntered = true;
-                setTimeout(() => {
-                    if (!this.mouseEntered) return;
+                if (this.timeoutId) clearTimeout(this.timeoutId)
+                this.timeoutId = setTimeout(() => {
                     this.show = true;
                     if (this.appendToBody) {
                         this.$nextTick(() => {
@@ -75,9 +74,8 @@
                 }, this.delay);
             },
             onMouseLeave() {
-                this.mouseEntered = false;
-                setTimeout(() => {
-                    if (this.mouseEntered) return;
+                if (this.timeoutId) clearTimeout(this.timeoutId)
+                this.timeoutId = setTimeout(() => {
                     if (this.appendToBody) {
                         document.body.removeChild(this.$refs.label);
                     }

From f55cccfe10906ec727621a810155031f084918fc Mon Sep 17 00:00:00 2001
From: RytisTarasevicius <139129643+RytisTarasevicius@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:58:15 +0300
Subject: [PATCH 5/5] Update Tooltip.vue

---
 src/components/Tooltip/Tooltip.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 2d254f5e..93640d6d 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -63,7 +63,7 @@
         },
         methods: {
             onMouseEnter() {
-                if (this.timeoutId) clearTimeout(this.timeoutId)
+                if (this.timeoutId) clearTimeout(this.timeoutId);
                 this.timeoutId = setTimeout(() => {
                     this.show = true;
                     if (this.appendToBody) {
@@ -74,7 +74,7 @@
                 }, this.delay);
             },
             onMouseLeave() {
-                if (this.timeoutId) clearTimeout(this.timeoutId)
+                if (this.timeoutId) clearTimeout(this.timeoutId);
                 this.timeoutId = setTimeout(() => {
                     if (this.appendToBody) {
                         document.body.removeChild(this.$refs.label);