Enhance component interactions with smart, floating UI tooltips and contextual menus.

Super Tooltip is a UX-focused plugin for GrapesJS that adds floating icons and contextual menus near selected components. It simplifies common actions with clean keyboard shortcuts and provides a polished in-canvas editing experience.

✨ Features

Floating “Add Component” and “More Options” Buttons
Intuitively placed icons appear next to selected components for quick access.
Keyboard Shortcuts
Perform actions like:
- Cmd/Ctrl + D: Add component
- Cmd/Ctrl + F: Open more options
- Cmd/Ctrl + E: Select parent
- Cmd/Ctrl + ↑ / ↓: Move component
- Cmd/Ctrl + S: Duplicate
- Del: Delete
Tooltip System
Smooth tooltips with shortcuts appear on hover, enhancing usability without clutter.
Animated Context Menus
- Block insertion with filterable search
- “Convert To” submenu for live component replacement
- Actions like move, delete, duplicate, select parent — all keyboard accessible
Integrated with BlockManager
Dynamically pulls available blocks with SVG/icon preview and content injection.

Logs:

Version 0.1.5 - Updated the position for buttons and updated to GrapesJS 0.22.x

Version 0.1.3 - Adding Moving Icon and Fixing issue with menu positions

Version 0.1.1 - "Add component" & "More options" & Short keys

grapesjs tooltip

Super Tooltip for GrapesJS

Related blog posts