place tooltips on the left of vertical modebars

Author: antoinerg

build/plotcss.js

@@ -43,6 +43,8 @@ var rules = {
     "X [data-title]:hover:before,X [data-title]:hover:after": "display:block;opacity:1;",
     "X [data-title]:before": "content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1002;margin-top:-12px;border-bottom-color:#69738a;margin-right:-6px;",
     "X [data-title]:after": "content:attr(data-title);background:#69738a;color:white;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;margin-right:-18px;border-radius:2px;",
+    "X .vertical [data-title]:before,X .vertical [data-title]:after": "top:0%;right:200%;",
+    "X .vertical [data-title]:before": "border:6px solid transparent;border-left-color:#69738a;margin-top:8px;margin-right:-30px;",
     "X .select-outline": "fill:none;stroke-width:1;shape-rendering:crispEdges;",
     "X .select-outline-1": "stroke:white;",
     "X .select-outline-2": "stroke:black;stroke-dasharray:2px 2px;",

src/css/_tooltip.scss

@@ -51,7 +51,7 @@ $successColor: hsl(121, 32%, 40%) !default;
         opacity: 1;
     }
 
-    // Arrow
+    // Top arrow
     &:before {
         content: '';
         position: absolute;
@@ -78,3 +78,18 @@ $successColor: hsl(121, 32%, 40%) !default;
         border-radius: 2px;
     }
 }
+
+.vertical [data-title] {
+  &:before, &:after {
+    top: 0%;
+    right: 200%;
+  }
+
+  // Right arrow
+  &:before {
+    border: $arrowBorderWidth solid transparent;
+    border-left-color: $defaultColor;
+    margin-top: $verticalPadding;
+    margin-right: -1 * ($arrowOffsetX + 2 *  $arrowBorderWidth);
+  }
+}