Add tooltipText param to TopNav and LeftNav

core/src/navigation/LeftNav.html

@@ -10,7 +10,14 @@
   <div class="lui-nav-title">
     <ul class="fd-nested-list">
       <li class="fd-nested-list__item">
-        <a class="fd-nested-list__link" title="{$getTranslation(navHeader.label)}">
+        <a
+          class="fd-nested-list__link"
+          title="{
+                (navHeader.tooltipText && navHeader.tooltipText.length) ?
+                $getTranslation(navHeader.tooltipText) :
+                (navHeader.tooltipText && navHeader.tooltipText === false) ? '' : $getTranslation(navHeader.label)
+                }"
+        >
           {#if navHeader.icon} {#if isOpenUIiconName(navHeader.icon)}
           <i
             class="lui-header-icon fd-nested-list__icon sap-icon sap-icon--{navHeader.icon}"
@@ -56,7 +63,11 @@
           <li class="fd-nested-list__item">
             <a
               href="{getRouteLink(node)}"
-              title="{$getTranslation(node.label)}"
+              title="{
+                (node.tooltipText && node.tooltipText.length) ?
+                $getTranslation(node.tooltipText) :
+                (node.tooltipText === false) ? '' : $getTranslation(node.label)
+                }"
               class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
               on:click|preventDefault="{() => handleClick(node)}"
               data-testid="{getTestId(node)}"
@@ -98,7 +109,11 @@
             <div class="fd-nested-list__content has-child">
               <a
                 href="javascript:void(null)"
-                title="{$getTranslation(key)}"
+                title="{
+                  (nodes.tooltipText && nodes.tooltipText.length) ?
+                  $getTranslation(nodes.tooltipText) :
+                  (nodes.tooltipText && nodes.tooltipText === false) ? '' : $getTranslation(key)
+                  }"
                 class="fd-nested-list__link {isExpanded(nodes, expandedCategories) ? 'is-expanded' : ''}"
                 tabindex="-1"
                 id="collapsible_listnode_{index}"
@@ -150,7 +165,11 @@
                   class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
                   on:click|preventDefault="{() => handleClick(node)}"
                   data-testid="{getTestId(node)}"
-                  title="{$getTranslation(node.label)}"
+                  title="{
+                    (node.tooltipText && node.tooltipText.length) ?
+                    $getTranslation(node.tooltipText) :
+                    (node.tooltipText === false) ? '' : $getTranslation(node.label)
+                    }"
                 >
                   <span class="fd-nested-list__title">{$getTranslation(node.label)}</span>
                   {#if node.externalLink && node.externalLink.url}
@@ -179,7 +198,11 @@
                       class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
                       on:click|preventDefault="{() => handleClick(node)}"
                       data-testid="{getTestId(node)}"
-                      title="{$getTranslation(node.label)}"
+                      title="{
+                        (node.tooltipText && node.tooltipText.length) ?
+                        $getTranslation(node.tooltipText) :
+                        (node.tooltipText === false) ? '' : $getTranslation(node.label)
+                        }"
                     >
                       <span class="fd-nested-list__title"
                         >{$getTranslation(node.label)}</span
@@ -201,7 +224,11 @@
           <!-- Category nodes -->
           <li
             class="fd-nested-list__group-header lui-category"
-            title="{$getTranslation(key)}"
+            title="{
+              (nodes.tooltipText && nodes.tooltipText.length) ?
+              $getTranslation(nodes.tooltipText) :
+              (nodes.tooltipText === false) ? '' : $getTranslation(key)
+              }"
             data-testid="{getTestIdForCat(nodes.metaInfo, key)}"
             id="category_list_level1_{index}"
           >
@@ -223,7 +250,11 @@
           {#each nodes as node} {#if !node.hideFromNav} {#if node.label}
           <li
             class="fd-nested-list__item"
-            title="{$getTranslation(node.label)}"
+            title="{
+              (node.tooltipText && node.tooltipText.length) ?
+              $getTranslation(node.tooltipText) :
+              (node.tooltipText === false) ? '' : $getTranslation(node.label)
+              }"
             aria-labelledby="category_list_level1_{index}"
           >
             <a
@@ -267,7 +298,7 @@
           class="lui-side-nav__footer--icon {isSemiCollapsed ? 'sap-icon--open-command-field' : 'sap-icon--close-command-field'}"
           on:click="{() => semiCollapsibleButtonClicked(this)}"
           data-testid="semiCollapsibleButton"
-          title="{burgerTooltip}"
+          title="burgerTooltip"
         ></i>
         {/if}
       </span>

core/src/navigation/TopNav.html

@@ -49,7 +49,11 @@
       <div class="fd-popover fd-popover--right">
         <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
           <button
-            title="{getNodeLabel(node)}"
+            title="{
+              (node.tooltipText && node.tooltipText.length) ?
+              node.tooltipText :
+              (node.tooltipText === false) ? '' : getNodeLabel(node)
+              }"
             class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
             aria-controls="dropDownPopover-{i}"
             aria-expanded="{dropDownStates[`dropDownPopover-${i}`] || false}"
@@ -88,7 +92,11 @@
       </a>
       {:else}
       <button
-        title="{getNodeLabel(node)}"
+        title="{
+              (node.tooltipText && node.tooltipText.length) ?
+              node.tooltipText :
+              (node.tooltipText === false) ? '' : getNodeLabel(node)
+              }"
         class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
         aria-expanded="false"
         aria-haspopup="true"
@@ -191,7 +199,11 @@
                 <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
-                    title="{getNodeLabel(node)}"
+                    title="{
+                      (node.tooltipText && node.tooltipText.length) ?
+                      node.tooltipText :
+                      (node.tooltipText === false) ? '' : getNodeLabel(node)
+                      }"
                     class="fd-menu__link"
                     on:click|preventDefault="{() => openMobileTopNavDropDown(node)}"
                     data-e2e="mobile-topnav-dropdown-category"

docs/navigation-parameters-reference.md

@@ -89,13 +89,22 @@ The navigation parameters allow you to configure **global** navigation settings
 
 ### nodeChangeHook
 - **type**: function
-- **description**: allows you to invoke and execute a specific function on the global level when a request to navigate to the node occurs. The function receives two node objects as input parameters: the previous node and current node, as described in the configuration. 
+- **description**: allows you to invoke and execute a specific function on the global level when a request to navigate to the node occurs. The function receives two node objects as input parameters: the previous node and current node, as described in the configuration.
 
 ### defaults.isolateView
 - **type**: boolean
 - **description**: renders all views in new frames. This setting overrides the same-domain frame reuse.
 - **default**: the parameter **defaults.isolateView** is `false` by default, and you can overwrite it using the **isolateView** value on a single node level.
 
+### tooltipText
+- **type**: string
+- **description**: allows you to add a tooltip to any of the links and buttons of the left side navigation and top navigation. You can set the parameter with the text that will appear on the tooltip.
+- **default**: it is `null` by default, and you can overwrite it using the **tooltipText** value on a single node level.
+- **example**:
+```javascript
+tooltipText: 'Useful links'
+```
+
 ### defaults.pageErrorHandler
 <!-- add-attribute:class:warning -->
 > **NOTE**: The **pageErrorHandler** only works if the [loading indicator](#loadingindicatorenabled) is not disabled.