feat: info tooltip in BuiInput & BuiSelect, on hover as default (#39)

* feat: info tooltip in BuiInput & BuiSelect, on hover as default (refs #DH-1089) * refactoring: removed unused import
soft-stech · Feb 1, 2024 · 306aa1a · 306aa1a
1 parent a57c454
commit 306aa1a
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 6 deletions.
diff --git a/src/components/BuiInput/BuiInput.story.vue b/src/components/BuiInput/BuiInput.story.vue
@@ -114,5 +114,27 @@ const modelForDisabling = ref(false)
         />
       </div>
     </Variant>
+    <Variant title="Tooltip on hover">
+      <div class="p-2">
+        <BuiInput
+          label="Default"
+          v-model="model"
+          info-tooltip-event="hover"
+          info-tooltip="My tooltip info <a href='https://stsoft.ru'>ST Soft </a>"
+        />
+      </div>
+    </Variant>
+    <Variant title="Tooltip on click for required">
+      <div class="p-2">
+        <BuiInput
+          label="Kubernetes Api Endpoint Port"
+          placeholder="1-65535"
+          :required="true"
+          info-tooltip-event="click"
+          info-tooltip="e.g. 6440"
+          v-model="model"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/src/components/BuiInput/BuiInput.vue b/src/components/BuiInput/BuiInput.vue
@@ -2,6 +2,12 @@
   <div class="flex flex-col justify-center gap-1">
     <label v-if="label" :class="labelClasses">
       {{ label }}
+      <BuiTooltip
+        v-if="infoTooltip"
+        :event="infoTooltipEvent"
+        variant="info"
+        :content="infoTooltip"
+      />
       <RequiredIcon v-if="required && !disabled" />
     </label>
     <div class="flex relative">
@@ -38,6 +44,7 @@
 import { computed, ref, watch } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import RequiredIcon from '../CommonElements/RequiredIcon.vue'
+import BuiTooltip from '../BuiTooltip/BuiTooltip.vue'
 
 type ValidationStatus = 'success' | 'error'
 interface InputProps {
@@ -48,6 +55,8 @@ interface InputProps {
   validationStatus?: ValidationStatus | null
   placeholder?: string | undefined
   hasForcedValidation?: boolean
+  infoTooltip?: string
+  infoTooltipEvent?: 'hover' | 'click'
 }
 
 const props = withDefaults(defineProps<InputProps>(), {
@@ -56,7 +65,8 @@ const props = withDefaults(defineProps<InputProps>(), {
   value: '',
   required: false,
   validationStatus: null,
-  placeholder: ''
+  placeholder: '',
+  infoTooltipEvent: 'hover'
 })
 const emit = defineEmits(['focus', 'blur', 'input'])
 

diff --git a/src/components/BuiSelect/BuiSelect.story.vue b/src/components/BuiSelect/BuiSelect.story.vue
@@ -77,5 +77,24 @@ const options = [
         <template #validationMessage> Do not select 'One'</template>
       </BuiSelect>
     </Variant>
+    <Variant title="Info tooltip on hover">
+      <BuiSelect
+        label="Select option"
+        :options="options"
+        v-model="model"
+        info-tooltip="My tooltip"
+        info-tooltip-event="hover"
+      />
+    </Variant>
+    <Variant title="Required with info tooltip on click">
+      <BuiSelect
+        label="Select right option (2)"
+        :options="options"
+        v-model="model"
+        info-tooltip-event="click"
+        info-tooltip="My tooltip"
+        :required="true"
+      />
+    </Variant>
   </Story>
 </template>
diff --git a/src/components/BuiSelect/BuiSelect.vue b/src/components/BuiSelect/BuiSelect.vue
@@ -2,6 +2,12 @@
   <label class="relative">
     <span v-if="label" :class="labelClasses">
       {{ label }}
+      <BuiTooltip
+        v-if="infoTooltip"
+        :event="infoTooltipEvent"
+        variant="info"
+        :content="infoTooltip"
+      />
       <RequiredIcon v-if="required && !disabled" />
     </span>
 
@@ -33,6 +39,7 @@
 import { computed, ref, watch } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import RequiredIcon from '@/components/CommonElements/RequiredIcon.vue'
+import BuiTooltip from '../BuiTooltip/BuiTooltip.vue'
 
 type ValidationStatus = 'success' | 'error'
 type OptionsType = {
@@ -48,6 +55,8 @@ interface InputProps {
   required?: boolean
   hasForcedValidation?: boolean
   validationStatus?: ValidationStatus | null
+  infoTooltip?: string
+  infoTooltipEvent?: 'hover' | 'click'
 }
 const props = withDefaults(defineProps<InputProps>(), {
   value: '',
@@ -57,7 +66,8 @@ const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   required: false,
   hasForcedValidation: false,
-  validationStatus: null
+  validationStatus: null,
+  infoTooltipEvent: 'hover'
 })
 const emit = defineEmits(['input', 'blur'])
 

diff --git a/src/components/BuiTooltip/BuiTooltip.vue b/src/components/BuiTooltip/BuiTooltip.vue
@@ -5,14 +5,26 @@ import { onMounted } from 'vue'
 import InfoIcon from '@/components/CommonElements/InfoIcon.vue'
 import { nanoid } from 'nanoid'
 
-const props = defineProps<{ content: string; variant: 'info' | 'id' | 'slot'; id?: string }>()
+const props = withDefaults(
+  defineProps<{
+    content: string
+    variant: 'info' | 'id' | 'slot'
+    event: 'click' | 'hover'
+    id?: string
+  }>(),
+  {
+    content: '',
+    variant: 'info',
+    event: 'hover'
+  }
+)
 const componentId = nanoid()
 
 onMounted(() => {
   const selector = props.variant === 'id' && props.id ? `#${props.id}` : `#${componentId}`
 
   tippy(selector, {
-    trigger: 'click',
+    trigger: props.event === 'hover' ? undefined : 'click',
     interactive: true,
     allowHTML: true,
     arrow: false,
@@ -24,7 +36,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative">
+  <div>
     <div
       v-if="variant === 'info' || (variant === 'id' && !id)"
       class="w-fit relative text-primary-500 hover:text-primary-550 py-1 cursor-pointer"

diff --git a/src/components/BuiTooltip/BuiTooltips.story.vue b/src/components/BuiTooltip/BuiTooltips.story.vue
@@ -4,11 +4,12 @@ import BuiTooltip from '@/components/BuiTooltip/BuiTooltip.vue'
 
 <template>
   <Story title="BuiTooltip" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
-    <Variant title="variant 'info'">
+    <Variant title="variant 'info' on hover">
       <br /><br />
       <br /><br />
       <BuiTooltip
         variant="info"
+        event="hover"
         content="My tooltip info <a href='https://stsoft.ru'>ST Soft</a>"
       />
       <br />