Fixed tooltip position (#831)

* fixed tooltip position

* fix: Linting error

* [updated] fixed tooltip issue

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>

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>

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%;

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,