Fix button tooltips for dropdowns

Author: harbournick

packages/super-editor/src/components/toolbar/ButtonGroup.vue

@@ -106,11 +106,19 @@ const handleClickOutside = (e) => {
         @clickoutside="handleClickOutside"
         :style="item.dropdownStyles.value"
       >
-        <ToolbarButton
-          :toolbar-item="item"
-          @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
-          @buttonClick="handleToolbarButtonClick(item)"
-        />
+        <n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
+          <template #trigger>
+            <ToolbarButton
+              :toolbar-item="item"
+              @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
+              @buttonClick="handleToolbarButtonClick(item)"
+            />
+          </template>
+          <div>
+            {{ item.tooltip }}
+            <span v-if="item.disabled.value">(disabled)</span>
+          </div>
+        </n-tooltip>
       </n-dropdown>
 
       <n-tooltip trigger="hover" v-else-if="isButton(item)">

packages/super-editor/src/components/toolbar/defaultItems.js

@@ -94,7 +94,7 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
       outline: 'none',
     },
     name: 'ai',
-    tooltip: 'AI Insights',
+    tooltip: 'AI text generation',
     icon: toolbarIcons.ai,
     hideLabel: true,
     hasCaret: false,
@@ -957,10 +957,10 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     separator,
     linkedStyles,
     separator,
+    ruler,
     pageBreakTool,
     copyFormat,
     clearFormatting,
-    ruler,
     aiButton,
     overflow,
     documentMode,