Tooltip in Grid Header Font not the same

[Barry]

When i put a tooltip in the grid header the style is not the same.

.net core7

bootstrap5

22.1.37

@page "/datagrid-features"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Popups
<PageTitle>DataGrid</PageTitle>
<h2>DataGrid</h2>
<br/>
<div id = "ControlRegion">
<SfGrid  ID="Grid" DataSource="@Orders"  @ref="Grid"  AllowFiltering="true"    AllowExcelExport="true"
               Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update","ExcelExport","Search"})" Height="315" Width="900">
        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>
        <GridEvents OnToolbarClick="ToolbarClick" TValue="Order"></GridEvents>
        <GridColumns>
            <GridColumn Type='ColumnType.CheckBox' Width="50"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true })" TextAlign="TextAlign.Right" Width="120">


            </GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true })" Width="120">
                <HeaderTemplate>
                    @{


                        <SfTooltip>
                            <TooltipTemplates>
                                <Content>
                                    Customer Name On Invoice
                                </Content>
                            </TooltipTemplates>
                            <span>Customer Name</span>
                        </SfTooltip>
                    }
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>
<br/>
<div>
  <h3>Selected Features:</h3>
    <ul class="ulstyle">
      <li class="list"> Exporting - Excel Export</li>
      <li class="list"> Filtering - Filter Bar</li>
      <li class="list"> Searching</li>
      <li class="list"> Checkbox Selection</li>
      <li class="list"> Editing - Normal</li>
      <li class="list"> Theme - Bootstrap v5</li>
    </ul>
</div>
<br/>
<style>
    .ulstyle {
        margin: 0px;
        padding-left: 20px;
        display: inline-block;
    }
    .list {
    float: left;
    line-height: 20px;
    margin: 10px;
    min-width: 200px;
    }
</style>
@code{
        public List<Order>? Orders { get; set; }
        SfGrid<Order>? Grid;
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
        }).ToList();
    }
    public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args.Item.Id == "Grid_excelexport")
        {
                this.Grid?.ExportToExcelAsync();
        }
    }
    public class Order
    {
        public int? OrderID { get; set; }
        public string? CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
        public string? ShipCountry { get; set; }
    }
}

[Sarveswaran Palani]

Hi Barry,

Greetings from Syncfusion support.

Based on your query, it appears that you are experiencing an issue with the Heater font style within the Header Template. We would like to inform you that the Template feature allows customization of the display according to specific requirements. Therefore, we have made modifications in the shared code snippet to meet your needs. Please refer to the attached code snippet and screenshot for your reference.

<HeaderTemplate>

      @{

          <SfTooltip>

                  <TooltipTemplates>

                       <Content>

                           Customer Name On Invoice

                        </Content>

                  </TooltipTemplates>

                  <span class="tooltiptext">Customer Name</span>

          </SfTooltip>

       }

</HeaderTemplate>

<style>

    .tooltiptext{

        font-size: 14px;

        font-weight: 700;

    }

</style>

If you have any further queries, please get back to us.

Regards,
Sarvesh

Attachment: SfGridToolTipFont_5c65b3b.zip