[DataGrid] Add HeaderTootip to columns to allow for custom header t…

…ooltip text (#2775) * Fix #2757 by using TooltipText if set (instead of always using Title) * Add HeaderTooltip
microsoft · Oct 7, 2024 · b434574 · b434574
1 parent 94fece7
commit b434574
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -1204,7 +1204,12 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.TooltipText">
             <summary>
-            Gets or sets the value to be used as the tooltip and aria-label in this column's cells
+            Gets or sets the function that defines the value to be used as the tooltip and aria-label in this column's cells
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderTooltip">
+            <summary>
+            Gets or sets the tooltip text for the column header.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderCellItemTemplate">

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -14,7 +14,7 @@
                 HeaderCellAsButtonWithMenu="true"
                 Style="height: 405px;overflow:auto;"
                 ColumnResizeLabels="@customLabels">
-    <TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
+    <TemplateColumn Tooltip="true" HeaderTooltip="Flag of each team" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
         <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
     </TemplateColumn>
     <PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">

diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
@@ -15,7 +15,7 @@
         }
         else if (Grid.HeaderCellAsButtonWithMenu)
         {
-            string? tooltip = Tooltip ? Title : null;
+            string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
 
             <FluentKeyCode Only="new [] { KeyCode.Ctrl, KeyCode.Enter}" OnKeyDown="HandleKeyDown" class="keycapture">
                 <span class="col-sort-container" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))" @oncontextmenu:preventDefault>
@@ -62,7 +62,7 @@
         }
         else
         {
-            string? tooltip = Tooltip ? Title : null;
+            string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
 
             @if (Align == Align.Start || Align == Align.Center)
             {

diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
@@ -55,11 +55,17 @@ public abstract partial class ColumnBase<TGridItem>
     public bool Tooltip { get; set; } = false;
 
     /// <summary>
-    /// Gets or sets the value to be used as the tooltip and aria-label in this column's cells
+    /// Gets or sets the function that defines the value to be used as the tooltip and aria-label in this column's cells
     /// </summary>
     [Parameter]
     public Func<TGridItem, string?>? TooltipText { get; set; }
 
+    /// <summary>
+    /// Gets or sets the tooltip text for the column header.
+    /// </summary>
+    [Parameter]
+    public string? HeaderTooltip { get; set; }
+
     /// <summary>
     /// Gets or sets an optional template for this column's header cell.
     /// If not specified, the default header template includes the <see cref="Title" /> along with any applicable sort indicators and options buttons.