Fix tooltip position (#655)

* Fix tooltip position

* Update paragraph

* Update version

* Update changelog

* Update docs/CHANGELOG.md
This commit is contained in:
George Berezhnoy 2019-03-27 16:13:51 +03:00 committed by GitHub
parent dd42adbb39
commit 8f670dc791
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 9 deletions

8
dist/editor.js vendored

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,9 @@
# Changelog # Changelog
### 2.12.3
- `Fix` — Make Toolbox tooltip position font-size independent
### 2.12.2 ### 2.12.2
- New *Inline Tools* — pass tool settings from configuration to Tool constructor - New *Inline Tools* — pass tool settings from configuration to Tool constructor

View file

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

View file

@ -371,13 +371,15 @@ export default class Toolbox extends Module {
})); }));
} }
const offset = 16; const leftOffset = 16;
const coordinate = button.offsetLeft; const coordinate = button.offsetLeft;
const topOffset = Math.floor(this.Editor.BlockManager.currentBlock.holder.offsetHeight / 2);
this.nodes.tooltip.innerHTML = ''; this.nodes.tooltip.innerHTML = '';
this.nodes.tooltip.appendChild(fragment); 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); this.nodes.tooltip.classList.add(this.CSS.tooltipShown);
} }

View file

@ -24,9 +24,8 @@
&__tooltip { &__tooltip {
position: absolute; position: absolute;
top: 43px; top: 25px;
padding: 6px 10px; padding: 6px 10px;
transform: translateX(-50%);
border-radius: 5px; border-radius: 5px;
line-height: 21px; line-height: 21px;
opacity: 0; opacity: 0;