diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
index d5ef1cbe..b1ccacfb 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@@ -24,101 +24,121 @@ export default {
       items: [
         {
           icon: 'bold',
+          title: 'Bold',
           action: () => this.editor.chain().focus().toggleBold().run(),
           isActive: () => this.editor.isActive('bold'),
         },
         {
           icon: 'italic',
+          title: 'Italic',
           action: () => this.editor.chain().focus().toggleItalic().run(),
           isActive: () => this.editor.isActive('italic'),
         },
         {
           icon: 'strikethrough',
+          title: 'Strike',
           action: () => this.editor.chain().focus().toggleStrike().run(),
           isActive: () => this.editor.isActive('strike'),
         },
         {
           icon: 'code-view',
+          title: 'Code',
           action: () => this.editor.chain().focus().toggleCode().run(),
           isActive: () => this.editor.isActive('code'),
         },
-        {
-          icon: 'format-clear',
-          action: () => this.editor.chain().focus().unsetAllMarks().run(),
-        },
-        {
-          icon: 'eraser-line',
-          action: () => this.editor.chain().focus().clearNodes().run(),
-        },
         {
           icon: 'paragraph',
+          title: 'Paragraph',
           action: () => this.editor.chain().focus().setParagraph().run(),
           isActive: () => this.editor.isActive('paragraph'),
         },
         {
           icon: 'h-1',
+          title: 'Heading 1',
           action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 1 }),
         },
         {
           icon: 'h-2',
+          title: 'Heading 2',
           action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 2 }),
         },
         {
           icon: 'h-3',
+          title: 'Heading 3',
           action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 3 }),
         },
         {
           icon: 'h-4',
+          title: 'Heading 4',
           action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 4 }),
         },
         {
           icon: 'h-5',
+          title: 'Heading 5',
           action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 5 }),
         },
         {
           icon: 'h-6',
+          title: 'Heading 6',
           action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
           isActive: () => this.editor.isActive('heading', { level: 6 }),
         },
         {
           icon: 'list-unordered',
+          title: 'Bullet List',
           action: () => this.editor.chain().focus().toggleBulletList().run(),
           isActive: () => this.editor.isActive('bulletList'),
         },
         {
           icon: 'list-ordered',
+          title: 'Ordered List',
           action: () => this.editor.chain().focus().toggleOrderedList().run(),
           isActive: () => this.editor.isActive('orderedList'),
         },
         {
           icon: 'code-box-line',
+          title: 'Code Block',
           action: () => this.editor.chain().focus().toggleCodeBlock().run(),
           isActive: () => this.editor.isActive('codeBlock'),
         },
         {
           icon: 'double-quotes-l',
+          title: 'Blockquote',
           action: () => this.editor.chain().focus().toggleBlockquote().run(),
           isActive: () => this.editor.isActive('blockquote'),
         },
         {
           icon: 'separator',
+          title: 'Horizontal Rule',
           action: () => this.editor.chain().focus().setHorizontalRule().run(),
         },
         {
           icon: 'text-wrap',
+          title: 'Hard Break',
           action: () => this.editor.chain().focus().setHardBreak().run(),
         },
+        {
+          icon: 'format-clear',
+          title: 'Clear Format',
+          action: () => this.editor.chain()
+            .focus()
+            .clearNodes()
+            .unsetAllMarks()
+            .run(),
+        },
         {
           icon: 'arrow-go-back-line',
+          title: 'Undo',
           action: () => this.editor.chain().focus().undo().run(),
         },
         {
           icon: 'arrow-go-forward-line',
+          title: 'Redo',
           action: () => this.editor.chain().focus().redo().run(),
         },
       ],
diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
index 8e27898e..672a6e91 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
@@ -3,6 +3,7 @@
     class="menu-item"
     :class="{ 'is-active': isActive ? isActive(): null }"
     @click="action"
+    :title="title"
   >
     <svg class="remix">
       <use :xlink:href="require('../../../../../node_modules/remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
@@ -18,6 +19,11 @@ export default {
       required: true,
     },
 
+    title: {
+      type: String,
+      required: true,
+    },
+
     action: {
       type: Function,
       required: true,