Merge pull request #8350 from infor-design/8252-disable-tooltip

8252 - Added option to disable tooltip in columns
infor-design · Jan 22, 2024 · 4f3d1a3 · 4f3d1a3
2 parents 41a0e7f + 454174e
commit 4f3d1a3
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 2 deletions.
diff --git a/app/views/components/datagrid/test-disable-tooltip-column.html b/app/views/components/datagrid/test-disable-tooltip-column.html
@@ -0,0 +1,128 @@
+<div class="row">
+  <div class="twelve columns">
+    <button class="btn-secondary" type="button" id="open-modal">Open Modal</button><br><br>
+
+    <div id="modal-content" style="display: none;">
+      <div id="datagrid">
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('body').one('initialized', function () {
+    let grid;
+    const modals = {
+      'open-modal': {
+        'title': 'Open Modal',
+        'content': $('#modal-content')
+      }
+    },
+    columns = [
+      {
+        id: 'Order',
+        name: 'P.O',
+        field: 'productionOrder',
+        formatter: Soho.Formatters.Readonly,
+        align: 'left',
+      },
+      {
+        id: 'order',
+        name: 'Order',
+        field: 'orderStatus',
+        formatter: Soho.Formatters.Readonly,
+        align: 'left',
+      },
+      {
+        id: 'ItemCode',
+        name: 'Code',
+        field: 'itemCode',
+        formatter: Soho.Formatters.Readonly,
+        sortable: false,
+        align: 'left',
+      },
+      {
+        id: 'plannedDeliveryDate',
+        name: 'Del Date',
+        field: 'plannedDeliveryDate',
+        formatter: Soho.Formatters.Date,
+        dateFormat: 'MM/dd/yyyy',
+        sortable: false,
+        align: 'left',
+        disableTooltip: true,
+      }
+    ],
+    data = [
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+      ];
+
+    grid = $('#datagrid').datagrid({
+      columns: columns,
+      dataset: data,
+      editable: true,
+      filterable: false,
+      redrawOnResize: false,
+      rowHeight: 'small',
+      selectable: 'mixed',
+      showDirty: true,
+      cellNavigation: true,
+      actionableMode: true,
+      enableTooltips: true,
+      toolbar: {
+        title: data.length + ' ' + 'Machine Issues'
+      },
+    }).data('datagrid');
+
+    setModal = function (opt) {
+      opt = $.extend({
+        autoFocus: true,
+        showCloseBtn: true,
+        buttons: [{
+          text: 'Cancel',
+          id: 'modal-button-1',
+          click: function(e, modal) {
+            modal.close();
+          }
+        }, {
+          text: 'Save',
+          id: 'modal-button-2',
+          click: function(e, modal) {
+            modal.close();
+          },
+          validate: false,
+          isDefault: true
+        }],
+        maxWidth: 1000
+      }, opt);
+
+      $('body').modal(opt);
+    };
+
+    $('#open-modal').on('click', function () {
+      setModal(modals[this.id]);
+    });
+  });
+</script>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ## v4.92.0 Features
 
+- `[Datagrid]` Added option to disable tooltip in columns. ([#8252](https://github.com/infor-design/enterprise/issues/8252))
 - `[Header]` Added an example configuration with both a hamburger and a back button. ([#8327](https://github.com/infor-design/enterprise/issues/8327))
 - `[Icons]` Added new icons which are more substantial in look. ([#8129](https://github.com/infor-design/enterprise/issues/8129))
 

diff --git a/src/components/datagrid/datagrid.js b/src/components/datagrid/datagrid.js
@@ -5062,7 +5062,8 @@ Datagrid.prototype = {
       }
 
       containerHtml[container] += `<td role="gridcell" ${ariaReadonly} aria-colindex="${j + 1}"` +
-        ` ${ariaDescribedby
+        ` ${col.disableTooltip ? 'disabletooltip ' : ''}` +
+        `${ariaDescribedby
         }${ariaChecked
         }${isSelected ? ' aria-selected="true"' : ''
         }${cssClass ? ` class="${cssClass}"` : ''
@@ -5765,9 +5766,10 @@ Datagrid.prototype = {
         const isHeaderIcon = DOM.hasClass(elem, 'datagrid-header-icon');
         const isPopup = isHeaderFilter ?
           elem.parentNode.querySelectorAll('.popupmenu.is-open').length > 0 : false;
-        const tooltip = $(elem).data('gridtooltip') || self.cacheTooltip(elem);
         const containerEl = isHeaderColumn ? elem.parentNode : isHeaderIcon ? elem.parentNode : elem;
         const width = self.getOuterWidth(containerEl);
+
+        const tooltip = $(elem).data('gridtooltip') || self.cacheTooltip(elem);
         if (tooltip && (tooltip.forced || (tooltip.textwidth > (width - 35))) && !isPopup) {
           self.showTooltip(tooltip);
         }
@@ -13014,6 +13016,10 @@ Datagrid.prototype = {
    * @returns {object} tooltip object.
    */
   cacheTooltip(elem, tooltip) {
+    if ($(elem).attr('disabletooltip') !== undefined) {
+      return tooltip;
+    }
+
     if (typeof tooltip === 'undefined') {
       const contentTooltip = elem.querySelector('.is-editor.content-tooltip');
       const aTitle = elem.querySelector('a[title]');