Restore tooltips on si-navbar-vertical and si-content-action-bar

docs/components/buttons-menus/content-actions.md

@@ -21,6 +21,10 @@ The content action bar groups primary and secondary actions and adjusts to the a
 - If the primary requirement is simply to have a menu that remains consistently collapsed,
   use a tertiary [circle button](../buttons-menus/buttons.md) with a [menu](../buttons-menus/menu.md).
 
+### Best practices
+
+- Since tooltips are temporary, easy to miss and generally not accessible on touch devices, avoid using them or use them for non-essential information only.
+
 ## Design ---
 
 ### Elements

docs/components/buttons-menus/menu.md

@@ -21,6 +21,7 @@ They are one of the most effective and highly used command surfaces, and can be
 - Keep disabled actions visible.
 - Do not use more than 2 submenus in a nested way.
 - Do not have a long and flat list of actions, which might not have space on a small screen.
+- Since tooltips are temporary, easy to miss and generally not accessible on touch devices, avoid using them or use them for non-essential information only.
 
 ## Design ---
 

projects/element-ng/content-action-bar/si-content-action-bar.component.html

@@ -26,7 +26,7 @@
                 si-menu-item
                 [attr.data-id]="primaryAction.id"
                 [attr.aria-label]="primaryAction.label | translate"
-                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''"
+                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)"
                 [badge]="primaryAction.badge"
                 [badgeColor]="primaryAction.badgeColor ?? 'secondary'"
                 [disabled]="primaryAction.disabled || disabled()"
@@ -45,7 +45,7 @@
                 si-menu-item-checkbox
                 [attr.data-id]="primaryAction.id"
                 [attr.aria-label]="primaryAction.label | translate"
-                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''"
+                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)"
                 [checked]="primaryAction.checked"
                 [badge]="primaryAction.badge"
                 [badgeColor]="primaryAction.badgeColor ?? 'secondary'"
@@ -66,7 +66,7 @@
                 si-menu-item
                 [attr.data-id]="primaryAction.id"
                 [attr.aria-label]="primaryAction.label | translate"
-                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''"
+                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)"
                 [badge]="primaryAction.badge"
                 [badgeColor]="primaryAction.badgeColor ?? 'secondary'"
                 [disabled]="primaryAction.disabled || disabled()"
@@ -88,7 +88,7 @@
                 si-menu-item
                 [attr.data-id]="primaryAction.id"
                 [attr.aria-label]="primaryAction.label | translate"
-                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''"
+                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)"
                 [badge]="primaryAction.badge"
                 [badgeColor]="primaryAction.badgeColor ?? 'secondary'"
                 [disabled]="primaryAction.disabled || disabled()"
@@ -114,7 +114,7 @@
                 si-menu-item
                 [attr.data-id]="primaryAction.id"
                 [attr.aria-label]="primaryAction.label | translate"
-                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''"
+                [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)"
                 [badge]="primaryAction.badge"
                 [badgeColor]="primaryAction.badgeColor ?? 'secondary'"
                 [disabled]="primaryAction.disabled || disabled()"

projects/element-ng/menu/si-menu-model.ts

@@ -23,6 +23,8 @@ export interface MenuItemBase {
   badgeColor?: string;
   /** Whether the menu item id disabled. */
   disabled?: boolean;
+  /** Tooltip that is shown when the user hovers over the menu item. */
+  tooltip?: TranslatableString;
 }
 
 export interface MenuItemGroup extends MenuItemBase {

projects/element-ng/navbar-vertical/si-navbar-vertical.component.html

@@ -87,8 +87,8 @@
         [expanded]="
           (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false
         "
-        [siTooltip]="item.label | translate"
-        [isDisabled]="!collapsed()"
+        [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate"
+        [isDisabled]="!collapsed() && !item.tooltip"
       >
         {{ item.label | translate }}
       </button>
@@ -99,8 +99,8 @@
         placement="end"
         [si-navbar-vertical-item]="item"
         [activeOverride]="item.active"
-        [siTooltip]="item.label | translate"
-        [isDisabled]="!collapsed()"
+        [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate"
+        [isDisabled]="!collapsed() && !item.tooltip"
       >
         {{ item.label | translate }}
       </button>
@@ -120,8 +120,8 @@
         [preserveFragment]="item.extras?.preserveFragment"
         [skipLocationChange]="item.extras?.skipLocationChange"
         [replaceUrl]="item.extras?.replaceUrl"
-        [siTooltip]="item.label | translate"
-        [isDisabled]="!collapsed()"
+        [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate"
+        [isDisabled]="!collapsed() && !item.tooltip"
       >
         {{ item.label | translate }}
       </a>
@@ -132,8 +132,8 @@
         [si-navbar-vertical-item]="item"
         [href]="item.href"
         [target]="item.target"
-        [siTooltip]="item.label | translate"
-        [isDisabled]="!collapsed()"
+        [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate"
+        [isDisabled]="!collapsed() && !item.tooltip"
       >
         {{ item.label | translate }}
       </a>

projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts

@@ -25,6 +25,8 @@ export interface NavbarVerticalItemBase {
    * By default, badges are always visible (both expanded and collapsed).
    */
   hideBadgeWhenCollapsed?: boolean;
+  /** Tooltip that is shown when the user hovers over the menu item. */
+  tooltip?: TranslatableString;
 }
 
 /** Use this type to create a group that can hold multiple items. */

src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts

@@ -45,8 +45,8 @@ export class SampleComponent {
         { type: 'action', label: 'Previous action 3', action: () => alert('Undo action 3') }
       ]
     },
-    { type: 'action', label: 'Undo', icon: 'element-undo', action: () => alert('Undo') },
-    { type: 'action', label: 'Redo', icon: 'element-redo', action: () => alert('Redo') }
+    { type: 'action', label: 'Undo', icon: 'element-undo', tooltip: 'Undo last change', action: () => alert('Undo') },
+    { type: 'action', label: 'Redo', icon: 'element-redo', tooltip: 'Redo last change', action: () => alert('Redo') }
   ];
 
   primaryActionsIcons: ContentActionBarMainItem[] = [

src/app/examples/si-navbar-vertical/si-navbar-vertical.ts

@@ -32,7 +32,8 @@ export class SampleComponent implements OnInit {
       label: 'Home',
       id: 'home',
       icon: 'element-home',
-      routerLink: 'home'
+      routerLink: 'home',
+      tooltip: 'Go to home page'
     },
     { type: 'header', label: 'Modules' },
     {