diff --git a/packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss b/packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss
index d4888263ba..3f03e86d74 100644
--- a/packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss
+++ b/packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss
@@ -30,12 +30,4 @@ $panel-message-overlay-top: 30px;
.grid-cursor-linker {
cursor: crosshair;
-}
-
-.tab-tooltip-container {
- .column-statistics-grid {
- border-top: 1px solid $gray-500;
- margin: 5px -15px 0;
- font-weight: 300;
- }
-}
+}
\ No newline at end of file
diff --git a/packages/dashboard-core-plugins/src/panels/IrisGridPanelTooltip.tsx b/packages/dashboard-core-plugins/src/panels/IrisGridPanelTooltip.tsx
index 22b4c5ae3b..4b5c4b766e 100644
--- a/packages/dashboard-core-plugins/src/panels/IrisGridPanelTooltip.tsx
+++ b/packages/dashboard-core-plugins/src/panels/IrisGridPanelTooltip.tsx
@@ -18,6 +18,9 @@ function IrisGridPanelTooltip(props: IrisGridPanelTooltipProps): ReactElement {
const rowCount = (model?.rowCount ?? 0) - (model?.pendingRowCount ?? 0);
const formattedRowCount = model?.displayString(rowCount, 'long');
+ const columnCount = model?.columnCount ?? 0;
+ const formattedcolumnCount = model?.displayString(columnCount, 'long');
+
return (
-
- Number of Rows
- {formattedRowCount}
-
+
+ Number of Columns
+
+ {formattedcolumnCount}
+
+ Number of Rows
+ {formattedRowCount}
);
}
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
index 4abdaeb206..e8f3bd2913 100644
--- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
@@ -1,23 +1,47 @@
+@import '@deephaven/components/scss/custom.scss';
+
$tooltip-container-width: 300px;
-$tooltip-title-width: 110px;
-.tab-tooltip-container {
- padding: 5px 15px;
+.tab-tooltip-grid-container {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: first baseline;
max-width: $tooltip-container-width;
text-align: left;
.tab-tooltip-title {
- min-width: $tooltip-title-width;
+ font-weight: 700;
+ }
+
+ .tab-tooltip-name-wrapper {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: first baseline;
+ gap: $spacer-1;
}
.tab-tooltip-name {
- max-width: $tooltip-container-width - $tooltip-title-width;
word-break: break-word;
- padding-left: 5px;
}
- .tab-tooltip-copy {
- margin-left: 2px;
- margin-top: -4px;
+ hr.tab-tooltip-divider {
+ grid-column: span 2;
+ width: 100%;
+ margin: $spacer-1 0;
+ border-color: $gray-500;
+ }
+
+ .tab-tooltip-description {
+ grid-column: span 2;
+ color: $text-muted;
+ padding-bottom: $spacer-1;
+ }
+
+ .tab-tooltip-statistic-value {
+ font-feature-settings: 'tnum';
+ text-align: right;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
}
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
index ab3dc9171b..ed9557cf99 100644
--- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
@@ -18,11 +18,9 @@ function WidgetPanelTooltip(props: WidgetPanelTooltipProps): ReactElement {
const panelTitle = LayoutUtils.getTitleFromContainer(glContainer);
return (
-
-
-
- {widgetType} Name
-
+
+
{widgetType} Name
+
{widgetName}
{widgetName !== panelTitle && (
-
-
- Display Name
-
+ <>
+ Display Name
{panelTitle}
-
+ >
)}
{description && (
-
- {description}
-
+
{description}
)}
{children}