tooltip refactoring -- part 2

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/line-progress/line-progress.scss

@@ -1,5 +1,6 @@
 
 .LineProgress {
+  position: relative;
   border-radius: 2px;
   background: $lineProgressBackground;
   height: 3px;

src/renderer/components/tooltip/tooltip.scss

@@ -4,7 +4,7 @@
   // https://developer.mozilla.org/en-US/docs/Web/CSS/position
   position: fixed;
   margin: 0 !important;
-  background: $contentColor;
+  background: $mainBackground;
   font-size: small;
   font-weight: normal;
   border: 1px solid $borderColor;
@@ -14,10 +14,12 @@
   padding: .5em;
   text-align: center;
   pointer-events: none;
-  z-index: 1000;
   transition: opacity 150ms 25ms ease-in-out;
+  z-index: 100000;
 
   &.hidden {
+    left: 0;
+    top: 0;
     opacity: 0;
     visibility: hidden;
   }

src/renderer/components/tooltip/tooltip.tsx

@@ -1,6 +1,7 @@
 import './tooltip.scss'
 
 import React from "react"
+import { createPortal } from "react-dom"
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { observable } from "mobx";
@@ -11,6 +12,7 @@ export interface TooltipProps {
   targetId: string; // "id" of target html-element to bind
   visible?: boolean;
   offset?: number; // px
+  usePortal?: boolean;
   position?: TooltipPosition;
   className?: IClassName;
   formatters?: TooltipContentFormatters;
@@ -27,6 +29,7 @@ export interface TooltipContentFormatters {
 }
 
 const defaultProps: Partial<TooltipProps> = {
+  usePortal: true,
   offset: 10,
 }
 
@@ -132,8 +135,8 @@ export class Tooltip extends React.Component<TooltipProps> {
       break;
     }
     return {
-      left,
-      top,
+      left: left,
+      top: top,
       right: left + selfBounds.width,
       bottom: top + selfBounds.height,
     };
@@ -145,15 +148,19 @@ export class Tooltip extends React.Component<TooltipProps> {
   }
 
   render() {
-    const { style, formatters, position, children } = this.props;
+    const { style, formatters, usePortal, children } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
       hidden: !this.isVisible,
       formatter: !!formatters,
     });
-    return (
+    const tooltip = (
       <div className={className} style={style} ref={this.bindRef}>
         {children}
       </div>
-    );
+    )
+    if (usePortal) {
+      return createPortal(tooltip, document.body,);
+    }
+    return tooltip;
   }
 }