diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
index cfbd454bf1..7ffa512937 100644
--- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
@@ -8,6 +8,7 @@ $tooltip-container-width: 300px;
align-items: first baseline;
max-width: $tooltip-container-width;
text-align: left;
+ column-gap: $spacer-3;
.tab-tooltip-title {
font-weight: 700;
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx
new file mode 100644
index 0000000000..8cdcbda040
--- /dev/null
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import WidgetPanelTooltip from './WidgetPanelTooltip';
+
+describe('WidgetPanelTooltip', () => {
+ const descriptor = {
+ name: 'TestName',
+ type: 'PartitionedTable',
+ description: 'This is a test description',
+ displayName: 'Test Display Name',
+ };
+
+ it('renders the formatted type name', () => {
+ const { getByText } = render(
+
+ );
+ expect(getByText('Partitioned Table Name')).toBeInTheDocument();
+ });
+
+ it('renders the name and copy button', () => {
+ const { getByText, getByRole } = render(
+
+ );
+ expect(getByText('TestName')).toBeInTheDocument();
+ expect(getByRole('button', { name: /copy name/i })).toBeInTheDocument();
+ });
+
+ it('renders the display name if different from name', () => {
+ const { getByText } = render(
+
+ );
+ expect(getByText('Display Name')).toBeInTheDocument();
+ expect(getByText('Test Display Name')).toBeInTheDocument();
+ });
+
+ it('does not render the display name if same as name', () => {
+ const { queryByText } = render(
+
+ );
+ expect(queryByText('Display Name')).not.toBeInTheDocument();
+ });
+
+ it('renders the description if provided', () => {
+ const { getByText } = render(
+
+ );
+ expect(getByText('This is a test description')).toBeInTheDocument();
+ });
+
+ it('does not render the description if not provided', () => {
+ const { queryByText } = render(
+
+ );
+ expect(queryByText('This is a test description')).not.toBeInTheDocument();
+ });
+
+ it('renders children if provided', () => {
+ const { getByText } = render(
+
+ Child Element
+
+ );
+ expect(getByText('Child Element')).toBeInTheDocument();
+ });
+});
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
index 61344f0448..9dd9afbe5e 100644
--- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
@@ -7,9 +7,13 @@ function WidgetPanelTooltip(props: WidgetPanelTooltipProps): ReactElement {
const { children, descriptor } = props;
const { name, type, description, displayName } = descriptor;
+ // Convert PascalCase to Title Case
+ // ex. PartitionedTable -> Partitioned Table
+ const formattedType = type.replace(/([a-z])([A-Z])/g, '$1 $2');
+
return (
-
{type} Name
+
{formattedType} Name
{name}