Tooltip misplaced (#3499)

* fix bug: tooltip misplaced

* Transition only opacity attributes

Author: Aaron-Bird

browser/components/StorageItem.js

@@ -21,7 +21,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 
 /**
  * @param {boolean} isActive
+ * @param {object} tooltipRef,
  * @param {Function} handleButtonClick
+ * @param {Function} handleMouseEnter
  * @param {Function} handleContextMenu
  * @param {string} folderName
  * @param {string} folderColor
@@ -35,7 +37,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 const StorageItem = ({
   styles,
   isActive,
+  tooltipRef,
   handleButtonClick,
+  handleMouseEnter,
   handleContextMenu,
   folderName,
   folderColor,
@@ -49,6 +53,7 @@ const StorageItem = ({
     <button
       styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
       onClick={handleButtonClick}
+      onMouseEnter={handleMouseEnter}
       onContextMenu={handleContextMenu}
       onDrop={handleDrop}
       onDragEnter={handleDragEnter}
@@ -75,15 +80,19 @@ const StorageItem = ({
         <span styleName='folderList-item-noteCount'>{noteCount}</span>
       )}
       {isFolded && (
-        <span styleName='folderList-item-tooltip'>{folderName}</span>
+        <span styleName='folderList-item-tooltip' ref={tooltipRef}>
+          {folderName}
+        </span>
       )}
     </button>
   )
 }
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
+  tooltipRef: PropTypes.object,
   handleButtonClick: PropTypes.func,
+  handleMouseEnter: PropTypes.func,
   handleContextMenu: PropTypes.func,
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,

browser/components/StorageItem.styl

@@ -60,6 +60,7 @@
   border-bottom-right-radius 2px
   height 34px
   line-height 32px
+  transition-property opacity
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip

browser/main/SideNav/StorageItem.js

@@ -144,6 +144,15 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleFolderMouseEnter(e, tooltipRef, isFolded) {
+    if (isFolded) {
+      const buttonEl = e.currentTarget
+      const tooltipEl = tooltipRef.current
+
+      tooltipEl.style.top = buttonEl.getBoundingClientRect().y + 'px'
+    }
+  }
+
   handleFolderButtonContextMenu(e, folder) {
     context.popup([
       {
@@ -316,6 +325,7 @@ class StorageItem extends React.Component {
           folder.key
       )
       const isActive = !!location.pathname.match(folderRegex)
+      const tooltipRef = React.createRef(null)
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = 0
@@ -339,7 +349,11 @@ class StorageItem extends React.Component {
           key={folder.key}
           index={index}
           isActive={isActive || folder.key === this.state.draggedOver}
+          tooltipRef={tooltipRef}
           handleButtonClick={e => this.handleFolderButtonClick(folder.key)(e)}
+          handleMouseEnter={e =>
+            this.handleFolderMouseEnter(e, tooltipRef, isFolded)
+          }
           handleContextMenu={e => this.handleFolderButtonContextMenu(e, folder)}
           folderName={folder.name}
           folderColor={folder.color}