From 13e944a425332ab18e879712aee8b71f82f1f1c3 Mon Sep 17 00:00:00 2001
From: Sai Deepesh <saideepesh000@gmail.com>
Date: Mon, 11 Jan 2021 20:59:55 +0530
Subject: [PATCH] Fixed tooltip position (#831)

* fixed tooltip position

* fix: Linting error

* [updated] fixed tooltip issue
---
 src/renderer/components/ft-input/ft-input.vue          |  2 +-
 .../components/ft-toggle-switch/ft-toggle-switch.vue   |  1 +
 src/renderer/components/ft-tooltip/ft-tooltip.css      | 10 ++++++++++
 src/renderer/components/ft-tooltip/ft-tooltip.js       |  2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 2fad39d2..4e461a62 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -14,7 +14,7 @@
       <ft-tooltip
         v-if="tooltip !== ''"
         class="selectTooltip"
-        position="right"
+        position="bottom"
         :tooltip="tooltip"
       />
     </label>
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
index f7a80e48..400793fc 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
@@ -21,6 +21,7 @@
       <ft-tooltip
         v-if="tooltip !== ''"
         class="selectTooltip"
+        position="bottom-left"
         :tooltip="tooltip"
       />
     </label>
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index efc5a7bc..3a1977d7 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -15,6 +15,8 @@
 
 .button:focus + .text.bottom,
 .button:hover + .text.bottom,
+.button:hover + .text.bottom-left,
+.button:hover + .text.bottom-left,
 .button:focus + .text.top,
 .button:hover + .text.top {
   -webkit-transform: translate(-50%, 0);
@@ -57,6 +59,14 @@
   transform: translate(-50%, -1em);
 }
 
+.text.bottom-left {
+  margin-top: 1em;
+  top: 100%;
+  left: -100px;
+  -webkit-transform: translate(-50%, -1em);
+  transform: translate(-50%, -1em);
+}
+
 .text.left {
   margin-right:1em;
   right: 100%;
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.js b/src/renderer/components/ft-tooltip/ft-tooltip.js
index 709b5a80..d79135b3 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.js
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.js
@@ -7,7 +7,7 @@ export default Vue.extend({
     position: {
       type: String,
       default: 'bottom',
-      validator: (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top'
+      validator: (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top' || value === 'bottom-left'
     },
     tooltip: {
       type: String,