From d6cfc8d5fc697440fa346f813dbc2d06398d199d Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 23 Sep 2018 16:01:12 -0600
Subject: [PATCH 1/4] make tooltip smarter

---
 src/renderer/component/common/tooltip.jsx | 63 ++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index 811f09fef..8c88358d7 100644
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@@ -16,8 +16,66 @@ class ToolTip extends React.PureComponent<Props> {
     direction: 'bottom',
   };
 
+  constructor(props) {
+    super(props);
+    this.tooltip = React.createRef();
+    this.state = {
+      direction: this.props.direction,
+    };
+  }
+
+  componentDidMount() {
+    this.handleVisibility();
+  }
+
+  getVisibility = () => {
+    const node = this.tooltip.current;
+    const rect = node.getBoundingClientRect();
+
+    // Get parent-container
+    const viewport = document.getElementById('content');
+
+    const visibility = {
+      top: rect.top >= 0,
+      left: rect.left >= 0,
+      right: rect.right <= viewport.offsetWidth,
+      bottom: rect.bottom <= viewport.offsetHeight,
+    };
+
+    return visibility;
+  };
+
+  invertDirection = () => {
+    // Get current direction
+    const { direction } = this.state;
+    // Inverted directions
+    const directions = {
+      top: 'bottom',
+      left: 'right',
+      right: 'left',
+      bottom: 'top',
+    };
+
+    const inverted = directions[direction];
+
+    // Update direction
+    if (inverted) {
+      this.setState({ direction: inverted });
+    }
+  };
+
+  handleVisibility = () => {
+    const { direction } = this.state;
+    const visibility = this.getVisibility();
+
+    if (!visibility[direction]) {
+      this.invertDirection();
+    }
+  };
+
   render() {
-    const { children, label, body, icon, direction, onComponent } = this.props;
+    const { direction } = this.state;
+    const { children, label, body, icon, onComponent } = this.props;
 
     const tooltipContent = children || label;
     const bodyLength = body.length;
@@ -25,6 +83,8 @@ class ToolTip extends React.PureComponent<Props> {
 
     return (
       <span
+        onFocus={this.handleVisibility}
+        onMouseOver={this.handleVisibility}
         className={classnames('tooltip', {
           'tooltip--label': label && !icon,
           'tooltip--icon': icon,
@@ -37,6 +97,7 @@ class ToolTip extends React.PureComponent<Props> {
       >
         {tooltipContent}
         <span
+          ref={this.tooltip}
           className={classnames('tooltip__body', {
             'tooltip__body--short': isShortDescription,
           })}

From 9ce626cd6e4ee95c6051bb4d4709aa889add70bb Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 23 Sep 2018 16:10:29 -0600
Subject: [PATCH 2/4] fix tooltip styles

---
 src/renderer/scss/component/_tooltip.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index 9acd75954..914d86594 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -63,13 +63,13 @@
     &.tooltip__body--short {
       margin-left: -65px;
     }
-  }
 
-  &::after {
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-color: var(--tooltip-bg) transparent transparent transparent;
+    &::after {
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-color: var(--tooltip-bg) transparent transparent transparent;
+    }
   }
 }
 

From 3d8f612ca0bc4af48fc3d591e8cd02f1e7334055 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 23 Sep 2018 22:28:08 -0600
Subject: [PATCH 3/4] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab35e4285..6ed1baa00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 * Allow typing of encryption password without clicking entry box ([#1977](https://github.com/lbryio/lbry-desktop/pull/1977))
 
 ### Changed
+* Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))
 
 ### Fixed
 

From a028420dc42548e3ab928e788cbc9e9112b3a30d Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 24 Sep 2018 17:08:41 -0600
Subject: [PATCH 4/4] add comment

---
 src/renderer/component/common/tooltip.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index 8c88358d7..c54318098 100644
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@@ -68,6 +68,7 @@ class ToolTip extends React.PureComponent<Props> {
     const { direction } = this.state;
     const visibility = this.getVisibility();
 
+    // Invert direction if tooltip is outside viewport bounds
     if (!visibility[direction]) {
       this.invertDirection();
     }