feat: show tooltip on hover select option

spartez · Jan 15, 2024 · 2e380e6 · 2e380e6
1 parent 1085207
commit 2e380e6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
@@ -133,6 +133,11 @@
         components: {
             TextField, Popper, SelectMenu, Tag, Icons
         },
+        provide() {
+            return {
+                $showOptionTooltip: this.showOptionTooltip
+            };
+        },
         props: {
             value: {
                 type: [String, Number, Object, Array],
@@ -238,6 +243,10 @@
             dropdownWidth: {
                 type: Number,
                 default: undefined
+            },
+            showOptionTooltip: {
+                type: Boolean,
+                default: false
             }
         },
         data() {

diff --git a/src/components/Select/SelectOption.vue b/src/components/Select/SelectOption.vue
@@ -1,5 +1,29 @@
 <template>
-  <div
+  <Tooltip 
+    v-if="this.$showOptionTooltip"
+    class="tooltip-wrapper"
+    placement="top"
+    :label="option.value"
+  >
+    <div
+      ref="option"
+      :selected="isSelected"
+      class="select-option"
+      :current="current"
+      @click.stop="onOptionSelected"
+      @mouseover="onMouseOver"
+    >
+      <slot
+        name="option"
+        :option="option.value"
+        :is-current="current"
+      >
+        {{ option.label }}
+      </slot>
+    </div>
+  </Tooltip>
+  <div 
+    v-else
     ref="option"
     :selected="isSelected"
     class="select-option"
@@ -18,8 +42,17 @@
 </template>
 
 <script>
+    import Tooltip from '../Tooltip/Tooltip';
+
     export default {
         name: 'SelectOption',
+        components: { Tooltip },
+        inject: {
+            $showOptionTooltip: {
+                from: '$showOptionTooltip',
+                default: undefined
+            }
+        },
         props: {
             option: {
                 type: Object,
@@ -74,6 +107,10 @@
 </script>
 
 <style scoped>
+
+.tooltip-wrapper {
+  width: 100%;
+}
 .select-option {
   cursor: pointer;
   display: block;