fix(input): open info tooltip on click (#259) (#341)

close #259
globalbrain · Sep 13, 2023 · 1ce9a93 · 1ce9a93
1 parent a11d642
commit 1ce9a93
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/lib/components/SInputBase.vue b/lib/components/SInputBase.vue
@@ -57,16 +57,12 @@ function getErrorMsg(validation: Validatable) {
 <template>
   <div class="SInputBase" :class="{ 'has-error': error?.has }">
     <label v-if="label" class="label" :for="name">
-      <STooltip v-if="hasInfo" :text="info">
-        <div class="label-text">
-          <span class="label-text-value">{{ label }}</span>
-          <SIcon class="label-text-info" :icon="IconQuestion" />
-        </div>
+      <span class="label-text">{{ label }}</span>
+
+      <STooltip v-if="hasInfo" :text="info" trigger="focus" @click.prevent>
+        <SIcon class="label-info" :icon="IconQuestion" />
         <template v-if="$slots.info" #text><slot name="info" /></template>
       </STooltip>
-      <div v-else class="label-text">
-        <span class="label-text-value">{{ label }}</span>
-      </div>
 
       <span class="label-note">{{ note }}</span>
 
@@ -119,26 +115,29 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  transition: color 0.25s;
-}
-
-.label-text-value {
   font-weight: 500;
   color: var(--input-label-color);
   transition: color 0.25s;
 }
 
-.label-text-info {
-  width: 16px;
-  height: 16px;
-  color: var(--c-text-2);
-  transition: color 0.25s;
+:deep(.STooltip) {
+  .label-info {
+    display: inline-block;
+    margin-left: 4px;
+    width: 16px;
+    height: 16px;
+    color: var(--c-text-2);
+    transition: color 0.25s;
+  }
+
+  &:hover, &:focus, &:focus-within {
+    .label-info {
+      color: var(--c-info-text);
+    }
+  }
 
-  .label-text:hover & {
-    color: var(--c-info-text);
+  .content {
+    vertical-align: middle;
   }
 }