feat: toolbar title support (#6740) (#6869)

Author: Bergiu

packages/g6/__tests__/demos/plugin-toolbar-build-in.ts

@@ -16,15 +16,15 @@ export const pluginToolbarBuildIn: TestCase = async (context) => {
         },
         getItems: () => {
           return [
-            { id: 'zoom-in', value: 'zoom-in' },
-            { id: 'zoom-out', value: 'zoom-out' },
-            { id: 'redo', value: 'redo' },
-            { id: 'undo', value: 'undo' },
-            { id: 'edit', value: 'edit' },
-            { id: 'delete', value: 'delete' },
-            { id: 'auto-fit', value: 'auto-fit' },
-            { id: 'export', value: 'export' },
-            { id: 'reset', value: 'reset' },
+            { id: 'zoom-in', value: 'zoom-in', title: 'Zoom in' },
+            { id: 'zoom-out', value: 'zoom-out', title: 'Zoom out' },
+            { id: 'redo', value: 'redo', title: 'Redo' },
+            { id: 'undo', value: 'undo', title: 'Undo' },
+            { id: 'edit', value: 'edit', title: 'Edit' },
+            { id: 'delete', value: 'delete', title: 'Delete' },
+            { id: 'auto-fit', value: 'auto-fit', title: 'Auto fit' },
+            { id: 'export', value: 'export', title: 'Export' },
+            { id: 'reset', value: 'reset', title: 'Reset' },
           ];
         },
       },

packages/g6/src/plugins/toolbar/index.ts

@@ -111,7 +111,7 @@ export class Toolbar extends BasePlugin<ToolbarOptions> {
     return items
       .map(
         (item) => `
-          <div class="g6-toolbar-item" value="${item.value}">
+          <div class="g6-toolbar-item" value="${item.value}" title="${item.title ?? ''}">
             <svg aria-hidden="true" focusable="false">
               <use xlink:href="#${item.id}"></use>
             </svg>

packages/g6/src/plugins/toolbar/util.ts

@@ -18,6 +18,10 @@ export interface ToolbarItem {
    * <en/> The value corresponding to the toolbar item, used as a callback parameter in `onClick`.
    */
   readonly value: string;
+  /**
+   * <en/> The title of the toolbar item. The title will be displayed as a tooltip when the mouse hovers over the item.
+   */
+  readonly title?: string;
 }
 
 /**