Fix tooltip position (codex-team#655)

* Fix tooltip position * Update paragraph * Update version * Update changelog * Update docs/CHANGELOG.md
afrknChld · Mar 27, 2019 · 8f670dc · 8f670dc
1 parent dd42adb
commit 8f670dc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.12.3
+
+- `Fix` — Make Toolbox tooltip position font-size independent  
+
 ### 2.12.2
 
 - New *Inline Tools* — pass tool settings from configuration to Tool constructor 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

diff --git a/src/components/modules/toolbar/toolbox.ts b/src/components/modules/toolbar/toolbox.ts
@@ -371,13 +371,15 @@ export default class Toolbox extends Module {
       }));
     }
 
-    const offset = 16;
+    const leftOffset = 16;
     const coordinate = button.offsetLeft;
+    const topOffset = Math.floor(this.Editor.BlockManager.currentBlock.holder.offsetHeight / 2);
 
     this.nodes.tooltip.innerHTML = '';
     this.nodes.tooltip.appendChild(fragment);
 
-    this.nodes.tooltip.style.left = `${coordinate + offset}px`;
+    this.nodes.tooltip.style.left = `${coordinate + leftOffset}px`;
+    this.nodes.tooltip.style.transform = `translate3d(-50%, ${topOffset}px, 0)`;
     this.nodes.tooltip.classList.add(this.CSS.tooltipShown);
   }
 

diff --git a/src/styles/toolbox.css b/src/styles/toolbox.css
@@ -24,9 +24,8 @@
 
   &__tooltip {
     position: absolute;
-    top: 43px;
+    top: 25px;
     padding: 6px 10px;
-    transform: translateX(-50%);
     border-radius: 5px;
     line-height: 21px;
     opacity: 0;