8846 - Tabs Vertical Tooltip

app/views/components/tabs-vertical/example-index.html

@@ -20,7 +20,7 @@ <h1>Vertical Tabs Test - Independent Scrolling</h1>
     <div class="page-container no-scroll">
 
       <!-- Vertical Tabs inside of a tab panel -->
-      <div id="tabs-vertical" class="vertical tab-container no-scroll is-personalizable" data-options='{ "verticalResponsive": true, "validate": false }'>
+      <div id="tabs-vertical" class="vertical tab-container no-scroll is-personalizable" data-options='{ "verticalResponsive": true, "validate": false, "moduleTabsTooltips": true }'>
 
         <div class="tab-list-container scrollable-y">
 

docs/CHANGELOG.md

@@ -20,8 +20,9 @@
 - `[Datagrid]` Added searched event for toolbar search. ([#8814](https://github.com/infor-design/enterprise/issues/8814))
 - `[Datagrid]` Added setting `overrideTabbing` to disable tabbing sequence of datagrid which will allow custom tabbing from users. ([#8825](https://github.com/infor-design/enterprise/issues/8825))
 - `[Weekview]` Added settings `showOvernightBothDays` and `overnightLabel` to customize overnight days. ([#8630](https://github.com/infor-design/enterprise/issues/8630))
-- `[Switch]` Update switch design. ([#8852](https://github.com/infor-design/enterprise/issues/8852))
+- `[Tabs Vertical]` Added settings `moduleTabsTooltips` available for tabs vertical to for showing tooltips. ([#8846](https://github.com/infor-design/enterprise/issues/8846))
 - `[Tests]` Changed test framework to playwright. ([#8549](https://github.com/infor-design/enterprise-wc/issues/8549))
+- `[Switch]` Update switch design. ([#8852](https://github.com/infor-design/enterprise/issues/8852))
 
 ## v4.97.0 Fixes
 

src/components/tabs-vertical/_tabs-vertical.scss

@@ -13,6 +13,9 @@
       @include css3(user-select, none);
       @include css3(touch-callout, none);
 
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
       color: $vertical-tab-text-color;
       display: block;
       font-size: $ids-size-font-base;

src/components/tabs/tabs.js

@@ -3466,11 +3466,7 @@ Tabs.prototype = {
     this.adjustSpilloverNumber();
   },
 
-  /**
-   * Checks cut off title for tabs.
-   * @private
-   * @returns {void}
-   */
+  /* Checks cut off title for tabs */
   checkCutOffTitle(tabs, visibleTabSize) {
     if (tabs.is('a')) {
       tabs = tabs.parent();
@@ -3508,7 +3504,12 @@ Tabs.prototype = {
           cutoff = 'yes';
         }
 
-        if (this.settings.maxWidth === null && prevWidth > (visibleTabSize - anchorPadding)) {
+        if (this.settings.maxWidth === null && prevWidth > (visibleTabSize - anchorPadding) && !this.element.hasClass('vertical')) {
+          cutoff = 'yes';
+        }
+
+        // Different Comparison for Vertical Tabs
+        if (this.settings.maxWidth === null && this.element.hasClass('vertical') && a[0].scrollWidth > a.innerWidth()) {
           cutoff = 'yes';
         }