feat: implemented a tooltip for table column headers

[nivzx]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

Closes #1792

Added a optional tooltip parameter to table_column

ui.table(name='table', columns=[
            ui.table_column(name='col1', label='Column 1', tooltip="I am a tooltip"),
            ui.table_column(name='col2', label='Column 2'),
        ]

The column header with tooltip property is displayed with a tooltip icon and the tooltip content is displayed when it's hovered.

cc @mturoci

[mturoci]

Thanks @nivzx!

• The tooltip is too far away from the icon.
• Hovering over icon shouldn't bring up pointer cursor since clicking the info icon triggers no action.
• The table column styling should remain intact.
• Please add a unit tests to verify that the info button with tooltip is only rendered when tooltip prop is specified on a col. Columns without the prop should not render the info icon.

[nivzx]

Fixed the styling issues. Will update the tests. Meanwhile please let me know your thoughts.
cc: @mturoci

[x] The tooltip is too far away from the icon.
[x] Hovering over icon shouldn't bring up pointer cursor since clicking the info icon triggers no action.
[x] The table column styling should remain intact.
[] Please add a unit tests to verify that the info button with tooltip is only rendered when tooltip prop is specified on a col. Columns without the prop should not render the info icon.

[mturoci]

The table styling should remain intact as mentioned previously.

You can use our visual regression testing tool:

• Checkout main
• make build-ui
• cd tools/showcase && make visual-regression
• chekout your feature branch
• make build-ui
• cd tools/showcase && make visual-regression
• make test-result.

See Makefile in tools/showcase for more info.

The tooltip is not centered, the icon is way too small and the spacing between other column icons is uneven.

Also, the tooltip probably needs either a border or slightly different background so that it's easier to spot:

Maybe needed for the rest of the tooltips as well so prefer generic solution.

[nivzx]

The table styling should remain intact as mentioned previously.

You can use our visual regression testing tool

The tooltip is not centered, the icon is way too small and the spacing between other column icons is uneven.

Also, the tooltip probably needs either a border or slightly different background so that it's easier to spot:

Maybe needed for the rest of the tooltips as well so prefer generic solution.

Got it! I'll try to refine this further. Thanks!

[nivzx]

• Fixed the issues with header stylings and verified with the visual regression tool.
• Increased the size and border thickness of the icon, and changed the background color of the tooltip to neutralLighterAlt for better visibility
• Fixed the misalignment of the tooltip with the icon
• Removed the unnecessary looping in table.test.tsx
• Properly typed tooltipHostProps with IDetailsColumnRenderTooltipProps

cc: @mturoci

[swaldow]

Is there anything new about this feature? We think it's cool and would like to have it :) @mturoci @nivzx

[mturoci]

@marek-mihok can you please review this PR and verify it works/didn't break anything once you have some time? Not urgent.

[marek-mihok]

LGTM! One small thing - when column is sortable, there is a gap between column title and tooltip until user activates sorting. Maybe we could show sort arrow for sortable columns right away?

Screen.Recording.2025-06-12.at.15.49.39.mov