Merge pull request #1979 from lbryio/tooltip

Smart tooltip

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
 

src/renderer/component/common/tooltip.jsx

@@ -16,8 +16,67 @@ 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();
+
+    // Invert direction if tooltip is outside viewport bounds
+    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 +84,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 +98,7 @@ class ToolTip extends React.PureComponent<Props> {
       >
         {tooltipContent}
         <span
+          ref={this.tooltip}
           className={classnames('tooltip__body', {
             'tooltip__body--short': isShortDescription,
           })}

src/renderer/scss/component/_tooltip.scss

@@ -63,13 +63,13 @@
     &.tooltip__body--short {
       margin-left: -65px;
     }
-  }
 
-  &::after {
+    &::after {
-    top: 100%;
+      top: 100%;
-    left: 50%;
+      left: 50%;
-    margin-left: -5px;
+      margin-left: -5px;
-    border-color: var(--tooltip-bg) transparent transparent transparent;
+      border-color: var(--tooltip-bg) transparent transparent transparent;
+    }
   }
 }