Syncfusion Blazor Circular Gauge tooltip customization does not work in TooltipRendering

[Ashish Khanal]

I am trying to customize `SfCircularGauge` tooltip text in Blazor using the `TooltipRendering` event.

The event handler is assigned, but the gauge still shows the default tooltip content such as:

- pointer: default value display

- range: `Start: ...` / `End: ...`

I expected `args.Content` changes inside `TooltipRendering` to replace the displayed tooltip text.

Minimal repro

@page "/circular-gauge-tooltip-repro"

@using SfGauge = Syncfusion.Blazor.CircularGauge

<SfCircularGauge Title="Tooltip Repro"

                 Height="360px"

                 CenterY="72%"

                 Background="transparent">

    <CircularGaugeEvents TooltipRendering="OnGaugeTooltipRendering" />

    <CircularGaugeTooltipSettings Enable="true"

                                  EnableAnimation="true"

                                  Type="@_tooltipTypes"

                                  ShowAtMousePosition="false">

        <CircularGaugeTooltipTextStyle Size="12px" FontFamily="inherit" />

        <CircularGaugeRangeTooltipSettings ShowAtMousePosition="false">

            <CircularGaugeRangeTooltipTextStyle Size="12px" FontFamily="inherit" />

        </CircularGaugeRangeTooltipSettings>

    </CircularGaugeTooltipSettings>

    <CircularGaugeAxes>

        <CircularGaugeAxis Minimum="12413"

                           Maximum="23110"

                           StartAngle="270"

                           EndAngle="90"

                           Radius="110%">

            <CircularGaugeAxisLineStyle Width="0" />

            <CircularGaugeAxisMajorTicks Width="0" />

            <CircularGaugeAxisMinorTicks Width="0" />

            <CircularGaugePointers>

                <CircularGaugePointer Value="14936"

                                      Radius="85%"

                                      Color="#0f172a"

                                      PointerWidth="10">

                    <CircularGaugeCap Radius="10" Color="#111827">

                        <CircularGaugeCapBorder Width="0" />

                    </CircularGaugeCap>

                </CircularGaugePointer>

            </CircularGaugePointers>

            <CircularGaugeRanges>

                <CircularGaugeRange Start="12413"

                                    End="19258"

                                    StartWidth="28"

                                    EndWidth="28"

                                    Color="#82b944"

                                    LegendText="Min to Max" />

                <CircularGaugeRange Start="19408"

                                    End="23110"

                                    StartWidth="28"

                                    EndWidth="28"

                                    Color="#ef4444"

                                    LegendText="Max to Potential Max" />

            </CircularGaugeRanges>

        </CircularGaugeAxis>

    </CircularGaugeAxes>

</SfCircularGauge>

@code {

    readonly string[] _tooltipTypes = new string[]{"Pointer", "Range"};

    void OnGaugeTooltipRendering(SfGauge.TooltipRenderEventArgs args)

    {

        if (string.Equals(args.Type, "Pointer", StringComparison.OrdinalIgnoreCase))

        {

            args.Content = "Current: 14,936";

            return;

        }

        if (!string.Equals(args.Type, "Range", StringComparison.OrdinalIgnoreCase))

        {

            return;

        }

        var parts = args.Content

            .Replace("<br>", "|", StringComparison.OrdinalIgnoreCase)

            .Split('|', StringSplitOptions.TrimEntries | StringSplitOptions.RemoveEmptyEntries);

        if (parts.Length != 2)

        {

            return;

        }

        var start = double.Parse(parts[0].Split(':')[1].Trim(), System.Globalization.CultureInfo.InvariantCulture);

        var end = double.Parse(parts[1].Split(':')[1].Trim(), System.Globalization.CultureInfo.InvariantCulture);

        args.Content = start == 12413

            ? $"Min: {start:N0}<br/>Max: {end:N0}"

            : $"Max: {start:N0}<br/>Potential Max: {end:N0}";

    }

}

Steps to reproduce

1. Run the page.

2. Hover the pointer tooltip.

3. Hover each range tooltip.

Expected behavior

The tooltip should display the custom content assigned in `TooltipRendering`, for example:

- `Current: 14,936`

- `Min: 12,413`

- `Max: 19,258`

- `Potential Max: 23,110`

Actual behavior

The tooltip still shows the default built-in content instead of the custom `args.Content` text.

Environment

- `Syncfusion.Blazor.CircularGauge` `32.1.19`

- .NET `9`

- Blazor Server/Web App

- Visual Studio 2026

Question

Is `TooltipRendering` expected to support overriding pointer and range tooltip content in `SfCircularGauge` for Blazor? If so, is there an additional required setting or is this a bug?

[Karthick Panneerselvam]

Hi Ashish Khanal,

 

We have considered your reported scenario as bug and logged a defect report for the issue ”SfCircularGauge TooltipRendering does not override tooltip content for Pointer and Range”. This fix will be available in our weekly patch release which is scheduled to be rolled on 30th June 2026. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

 

Feedback Link : SfCircularGauge TooltipRendering does not override tooltip content for Pointer and Range in Blazor | Feedback Portal

 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Karthick Panneerselvam.

[Karthick Panneerselvam]

Ashish,

 

We are glad to announce that our v34.1.30 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.CircularGauge NuGet package.

 

Root Cause :

During Circular Gauge tooltip rendering, the default Pointer/Range tooltip text was generated and committed before TooltipRendering, so even when args.Content was customized later, the renderer could still use the already-created built-in default value

 

Fix :

This fix was to update the tooltip flow so that Pointer/Range default content is first prepared through local content and passed via args.Content, and then the final post-event args.Content is synchronized back into the internal tooltip state, ensuring the displayed tooltip uses the customized value instead of the earlier default text

 

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/34.1.30

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.