Set title attribute in text column cell

change/@ni-nimble-components-e882872b-5836-48a7-83b6-370d8c95d411.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Set title attribute in text column",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/text/template.ts

@@ -7,6 +7,9 @@ TableCellState<TableColumnTextCellRecord, TableColumnTextColumnConfig>
 >`
     <span
         class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+        title="${x => (typeof x.cellRecord.value === 'string'
+        ? x.cellRecord.value
+        : x.columnConfig.placeholder)}"
     >
         ${x => (typeof x.cellRecord.value === 'string'
         ? x.cellRecord.value

packages/nimble-components/src/table-column/text/tests/table-column-text.spec.ts

@@ -62,6 +62,22 @@ describe('TableColumnText', () => {
         });
     }
 
+    it('sets title equal to rendered cell value', async () => {
+        element.setData([{ field: 'foo' }]);
+        await connect();
+        await waitForUpdatesAsync();
+
+        expect(pageObject.getCellTitle(0, 0)).toBe('foo');
+    });
+
+    it('sets title equal to rendered placeholder value', async () => {
+        element.setData([{ field: null }]);
+        await connect();
+        await waitForUpdatesAsync();
+
+        expect(pageObject.getCellTitle(0, 0)).toBe('no value');
+    });
+
     it('changing fieldName updates display', async () => {
         element.setData([{ field: 'foo', anotherField: 'bar' }]);
         await connect();

packages/nimble-components/src/table/tests/table.pageobject.ts

@@ -3,6 +3,7 @@ import type { TableHeader } from '../components/header';
 import type { TableRecord } from '../types';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import type { MenuButton } from '../../menu-button';
+import type { TableCell } from '../components/cell';
 
 /**
  * Page object for the `nimble-table` component to provide consistent ways
@@ -54,22 +55,20 @@ export class TablePageObject<T extends TableRecord> {
         rowIndex: number,
         columnIndex: number
     ): string {
-        const rows = this.tableElement.shadowRoot!.querySelectorAll('nimble-table-row');
-        if (rowIndex >= rows.length) {
-            throw new Error(
-                'Attempting to index past the total number of rendered rows'
-            );
-        }
-
-        const row = rows.item(rowIndex);
-        const cells = row.shadowRoot!.querySelectorAll('nimble-table-cell');
-        if (columnIndex >= cells.length) {
-            throw new Error(
-                'Attempting to index past the total number of rendered columns'
-            );
-        }
+        return (
+            this.getCell(
+                rowIndex,
+                columnIndex
+            ).shadowRoot!.textContent?.trim() ?? ''
+        );
+    }
 
-        return cells.item(columnIndex).shadowRoot!.textContent?.trim() ?? '';
+    public getCellTitle(rowIndex: number, columnIndex: number): string {
+        return (
+            this.getCell(rowIndex, columnIndex)
+                .shadowRoot!.querySelector('.cell-content-container span')
+                ?.getAttribute('title') ?? ''
+        );
     }
 
     public getRecordId(rowIndex: number): string | undefined {
@@ -93,24 +92,10 @@ export class TablePageObject<T extends TableRecord> {
         rowIndex: number,
         columnIndex: number
     ): MenuButton | null {
-        const rows = this.tableElement.shadowRoot!.querySelectorAll('nimble-table-row');
-        if (rowIndex >= rows.length) {
-            throw new Error(
-                'Attempting to index past the total number of rendered rows'
-            );
-        }
-
-        const row = rows.item(rowIndex);
-        const cells = row.shadowRoot!.querySelectorAll('nimble-table-cell');
-        if (columnIndex >= cells.length) {
-            throw new Error(
-                'Attempting to index past the total number of rendered columns'
-            );
-        }
-
-        return cells
-            .item(columnIndex)
-            .shadowRoot!.querySelector<MenuButton>('nimble-menu-button');
+        return this.getCell(
+            rowIndex,
+            columnIndex
+        ).shadowRoot!.querySelector<MenuButton>('nimble-menu-button');
     }
 
     public async clickCellActionMenu(
@@ -163,6 +148,25 @@ export class TablePageObject<T extends TableRecord> {
         }
     }
 
+    private getCell(rowIndex: number, columnIndex: number): TableCell {
+        const rows = this.tableElement.shadowRoot!.querySelectorAll('nimble-table-row');
+        if (rowIndex >= rows.length) {
+            throw new Error(
+                'Attempting to index past the total number of rendered rows'
+            );
+        }
+
+        const row = rows.item(rowIndex);
+        const cells = row.shadowRoot!.querySelectorAll('nimble-table-cell');
+        if (columnIndex >= cells.length) {
+            throw new Error(
+                'Attempting to index past the total number of rendered columns'
+            );
+        }
+
+        return cells.item(columnIndex);
+    }
+
     private getHeaderContentElement(
         element: HTMLElement | HTMLSlotElement
     ): Node | undefined {