We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS. This release brings improved positioning, compatibility updates, and smoother UX for your in‑canvas editing workflows.
What is Super Tooltip Plugin?
Super Tooltip is a UX‑focused plugin for GrapesJS designed to streamline component interactions inside the editor. It adds floating icons and contextual menus next to selected components so you can quickly perform common actions (add component, convert, move, delete, parent selection, etc.) without leaving the canvas. The plugin also supports keyboard shortcuts and tidy visual tooltips for a polished editing experience.
What’s new in version 0.1.5
Here are the key changes in this update:
- Updated button / tooltip positions to better align in recent versions of GrapesJS
- Compatibility bump: updated to work smoothly with GrapesJS v0.22.x
- Minor bug‑fixes around menu placement, ensuring the floating UI stays correctly aligned when editing components. (Building on fixes from v 0.1.3)
Why this matters
- Better alignment: Floating icons and menus now stay visually consistent with the selection, whether you’re nested deep or editing within a complex layout.
- Up‑to‑date compatibility: With GrapesJS evolving fast, ensuring the plugin works with v0.22.x helps you avoid mismatches and glitches.
- Improved UX: Smoother behavior means less distraction and more focus on design. The tooltips and shortcuts continue to make editing faster and more intuitive.
Quick Recap of Major Features
To remind you of what Super Tooltip offers:
- Floating “Add Component” and “More Options” buttons appear next to the selected component.
- Keyboard shortcuts such as:
- Cmd/Ctrl + D → Add component
- Cmd/Ctrl + F → Open “More Options” menu
- Cmd/Ctrl + E → Select parent
- Cmd/Ctrl + ↑ / ↓ → Move component up/down
- Cmd/Ctrl + S → Duplicate
- Delete → Remove
- Smooth tooltip system (hover triggered) to show shortcuts without cluttering the UI
- Animated context menus: insert blocks (with search/filter), “Convert To” submenu (live component replacement), and quick actions like move/delete/duplicate/select parent — all keyboard accessible
- BlockManager integration: automatically pulls blocks (with SVG/icon previews) and content injection support
Upgrade Instructions
If you’re already using Super Tooltip:
- Download the latest version (0.1.5) from the marketplace.
- Replace the plugin files in your project (dist build + source as needed).
- Ensure you’re running GrapesJS v0.22.x (or confirm compatibility).
- Clear cache (if using browser caching) and reload your editor instance.
- Check the floating menus and tooltips in the editor — verify that positioning works as expected especially when editing nested components.
- Report any layout issues or behavior quirks so we can address them in the next patch.
If you’re new: install Super Tooltip in your GrapesJS setup and activate it in your plugin initialization. Use the demo/preview to see it in action and consult the docs for further configuration options.
Looking Ahead
We’re already planning the next minor version, where we’ll focus on:
- More customization options (e.g., toggle which floating icons appear, control of shortcut sets).
- Better support for custom component types and non‑standard block insertion flows.
- Enhanced positioning logic for complex layouts (multi‑page, nested editors, off‑canvas panels).
- API hooks for advanced users to bind their own behaviour to the floating menus and shortcuts.
Final Thoughts
If you’re looking to give your GrapesJS‑based editor a more polished, user‑friendly in‑canvas experience, Super Tooltip offers a smart, lightweight UI enhancement. With version 0.1.5 you get improved alignment, up‑to‑date compatibility, and a smoother workflow right out of the box.
Try it today and let us know how it fits into your setup!
Check it: https://gjs.market/products/super-tooltip-for-grapesjs
Happy editing!
— The DevFuture Development Team