From d67e5b600997184eb133a98b2f00b6262cbb859f Mon Sep 17 00:00:00 2001
From: raphaeljp <rjp.raphael@gmail.com>
Date: Wed, 28 Dec 2022 11:51:55 -0300
Subject: [PATCH] feat(chip): add tooltip

---
 package.json                 |  4 ++--
 src/assets/scss/_chip.scss   | 29 ++++++++++++++++++++++++++++-
 src/components/Chip/Chip.vue |  8 ++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index db218a6d..9893b9ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@solfacil/components-ui",
-  "version": "1.88.1",
+  "version": "1.88.2",
   "private": false,
   "description": "Component library based on Vue and Tailwind",
   "author": "Solfacil - Fernando Jesus",
@@ -118,4 +118,4 @@
     "storybook"
   ],
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/_chip.scss b/src/assets/scss/_chip.scss
index fba2d2b9..3a68d6e6 100644
--- a/src/assets/scss/_chip.scss
+++ b/src/assets/scss/_chip.scss
@@ -1,5 +1,5 @@
 .chip {
-  @apply bg-gray1 rounded px-4 text-grayPrimary text-slight h-7 flex gap-2 items-center transition-all duration-200 ease-linear;
+  @apply bg-gray1 rounded px-4 text-grayPrimary text-slight h-7 flex gap-2 items-center transition-all duration-200 ease-linear relative;
   width: fit-content;
 
   .svg-wrapper {
@@ -10,6 +10,26 @@
     }
   }
 
+  .chip-tooltip {
+    @apply opacity-0 bg-grayPrimary absolute text-small text-white font-rubik font-normal rounded z-10 py-2 px-4 duration-200 ease-linear transition-all leading-tight;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    max-width: 320px;
+    transform: translateX(-50%);
+    visibility: hidden;
+    width: max-content;
+
+    &::after {
+      @apply absolute border-solid;
+      border-color: #666 transparent transparent transparent;
+      border-width: 6px;
+      content: '';
+      left: 50%;
+      top: 100%;
+      transform: translateX(-50%);
+    }
+  }
+
   &.small {
     @apply bg-gray2 px-2 py-1 h-auto;
 
@@ -25,4 +45,11 @@
       }
     }
   }
+
+  &:hover {
+    .chip-tooltip {
+      @apply opacity-100;
+      visibility: visible;
+    }
+  }
 }
diff --git a/src/components/Chip/Chip.vue b/src/components/Chip/Chip.vue
index a0c3c2a7..c8d7518b 100644
--- a/src/components/Chip/Chip.vue
+++ b/src/components/Chip/Chip.vue
@@ -4,6 +4,9 @@
     <div class="svg-wrapper" @click="handleClick()">
       <CloseIcon :class="{ small }" />
     </div>
+    <div v-if="tooltip" class="chip-tooltip">
+      {{ tooltip }}
+    </div>
   </span>
 </template>
 
@@ -26,6 +29,11 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    tooltip: {
+      type: String,
+      default: '',
+    },
   },
 
   methods: {