Toolbar on hover
Question
@artf how can we show toolbar on hover. Currently toolbar is open when we select any element but I want to show it on hover. Any help would be appreciated.

Answers (3)
@sakshigarg9 ,
editor.Commands.extend('select-comp', {
onHovered(em, component) {
const trg = component && component.getEl();
if (trg) {
const pos = this.getElementPos(trg);
this.updateBadge(trg, pos);
this.updateToolbar(component); // show toolbar
this.updateHighlighter(trg, pos);
this.showElementOffset(trg, pos);
}
},
});
The only way I can help you here is to tell you to check this command https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js (id of the command: select-comp) which is responsible for showing the toolbar. So you can try to use Commands API to extend it
@YashPrince Hi, were you able to solve this? I need a similar implementation
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1387
Include all the google fonts?
@artf I want to include all the google fonts in font family. How can we include/import all the font family, Any help would be appreciated.
Issue #1434
Toolbar Hide text element
@artf Please check you demo page text is hiding under the toolbar. how can we update the toolbar position?
Issue #2364
[Question] How to add toolbar functionality to the layers panel.
I am trying to add the toolbar to the layers panel and I am not sure how to go about this. Is there any way to accomplish this? toolbar Whe...
Issue #1791
Name of the destination
@artf, Is there any way to show the name of the destination element ?
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.