add DotButton hover text pos

src/components/globals/DotButton.vue

@@ -11,7 +11,7 @@
     @blur="show = false"
     @click="onClick"
   >
-    <span>
+    <span :class="pos">
       <slot name="default" />
     </span>
   </b-button>
@@ -25,7 +25,8 @@ export default {
     variant: { type: String, required: true },
     active: { type: Boolean, default: false },
     hovered: { type: Boolean, default: false },
-    dotOnly: { type: Boolean, default: false }
+    dotOnly: { type: Boolean, default: false },
+    pos: { type: String, default: 'left' }
   },
 
   data () {
@@ -74,10 +75,21 @@ export default {
       pointer-events: none;
       position: absolute;
       display: block;
-      transform: translate(calc(-100% + 1.1875rem), -50%);
       border-radius: 50rem;
       padding: 0 $input-btn-padding-x;
       line-height: 1.5;
+
+      &.left {
+        transform: translate(calc(-100% + 1.1875rem), -50%);
+      }
+
+      &.right {
+        transform: translate(-2px, -50%);
+      }
+
+      &.middle {
+        transform: translate(calc(-50% + #{1.1875rem / 2}), -50%);
+      }
     }
 
     @each $color, $value in $theme-colors {