Internal issue 2841 - Tooltips being overlapped on Data Table

[ticket-sync[bot]]

For the attention of the Core Team only, please refer to the internal log of issues.

This is related to tooltips attached to elements inside table cells being obscured by either neighbouring cells or the bottom of the table.

[GCHQ-Developer-741]

This issue has also been noticed when using an ic-select in the cell slot, where the menu is cut off.

import { mdiLayers } from "@mdi/js";
import { IcDataTable } from "@ukic/canary-react";
import { IcDataTableColumnObject } from "@ukic/canary-web-components";
import { IcButton, IcSelect, SlottedSVG } from "@ukic/react";

const App = () => {
  const columns: IcDataTableColumnObject[] = [
    {
      key: "firstName",
      title: "First name",
      dataType: "string",
    },
    {
      key: "lastName",
      title: "Last name",
      dataType: "string",
    },
    {
      key: "age",
      title: "Age",
      dataType: "number",
    },
  ];
  const data = [
    {
      firstName: "Joe",
    },
    {
      firstName: "Sarah",
    },
    {
      firstName: "Mark",
    },
  ];

  const selectOptions = [
    { value: "one", label: "One" },
    { value: "two", label: "Two" },
    { value: "three", label: "Three" },
  ];

  return (
    <IcDataTable caption="data-table" columns={columns} data={data}>
      {data.map(({ firstName }, index) => (
        <>
          <IcSelect
            slot={`age-${index}`}
            key={firstName}
            label="Select"
            placeholder="Select an option..."
            options={selectOptions}
            value={selectOptions[0].value}
            searchable
            fullWidth
            hideLabel
          />
          <IcButton
            slot={`lastName-${index}`}
            key={`post-icon-${firstName}`}
            aria-label={`Show details for user ${firstName}`}
            size="large"
            variant="icon"
          >
            <SlottedSVG path={mdiLayers} slot="icon" />
          </IcButton>
        </>
      ))}
    </IcDataTable>
  );
};

export default App;

[ad9242]

Resolved the issue for tooltips in most cases. However, the issue still persists if the tooltip would overlap the bottom of the table.

It seems to require the table-row-container to have overflow: visible. However, this would cause all rows to be visible & not enforce the table height with scrolling.

Needs further investigation\maybe a fresh pair of eyes

[MI6-255]

Fix is to have the position the opposite edge of where it'd overlap e.g. if at the top, the tooltip will be at the bottom