feat(chip): add tooltip

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"
-}
+}

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;
+    }
+  }
 }

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: {