Super Tooltip for GrapesJS

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