From b4345746859c105666c3284006de94cc9c7a7261 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Mon, 7 Oct 2024 18:02:04 +0200
Subject: [PATCH] [DataGrid] Add `HeaderTootip` to columns to allow for custom
 header tooltip text (#2775)

* Fix #2757 by using TooltipText if set (instead of always using Title)

* Add HeaderTooltip
---
 .../Shared/Microsoft.FluentUI.AspNetCore.Components.xml   | 7 ++++++-
 .../Shared/Pages/DataGrid/Examples/DataGridTypical.razor  | 2 +-
 src/Core/Components/DataGrid/Columns/ColumnBase.razor     | 4 ++--
 src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs  | 8 +++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index 3ce340929a..0407df2a43 100644
--- 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
index c3a7fd6db0..84195fa744 100644
--- 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
index 9d7475b32a..a9e18748bc 100644
--- 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
index f186b6ac45..def61a9c7d 100644
--- 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.