You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
changed the title [-]@using ThemeHelper , what package need install [/-][+]sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip?[/+]on Aug 28, 2024
You can customize the chart tooltip using the Template property in the ChartTooltipSettings. By default, the tooltip appears when hovering over the series data points and disappears when the cursor moves outside these points. This behavior is expected and works as designed.
Since the tooltip is designed to show on mouse hover, interactive actions, such as button clicks, will not work directly within the tooltip.
Here is an example of how you can implement the tooltip template:
<SfChart> <ChartTooltipSettings Enable="true"> <Template> @{ var data = context as ChartTooltipInfo; <div> <table style="width:100%; border: 1px solid black;"> <tr><td bgcolor="#00FFFF">@data.X : @data.Y</td></tr> <tr><button class="btn-primary">Button</button></tr> </table> </div> } </Template> </ChartTooltipSettings> </SfChart>
The reported query appears to be addressed in the latest update. Could you please confirm if everything works as expected? Closing for now, but feel free to reopen if needed.
sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip? · Issue #171 · syncfusion/blazor-samples
Activity
[-]@using ThemeHelper , what package need install [/-][+]sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip?[/+]G-Durga commentedon Feb 12, 2025
Thank you for reaching out.
You can customize the chart tooltip using the Template property in the ChartTooltipSettings. By default, the tooltip appears when hovering over the series data points and disappears when the cursor moves outside these points. This behavior is expected and works as designed.
Since the tooltip is designed to show on mouse hover, interactive actions, such as button clicks, will not work directly within the tooltip.
Here is an example of how you can implement the tooltip template:
<SfChart> <ChartTooltipSettings Enable="true"> <Template> @{ var data = context as ChartTooltipInfo; <div> <table style="width:100%; border: 1px solid black;"> <tr><td bgcolor="#00FFFF">@data.X : @data.Y</td></tr> <tr><button class="btn-primary">Button</button></tr> </table> </div> } </Template> </ChartTooltipSettings> </SfChart>
Sample : https://blazorplayground.syncfusion.com/VNroXhsrzvBmmwUW
UG : https://blazor.syncfusion.com/documentation/chart/tool-tip#tooltip-template
kmuthukumarmkm commentedon Jul 3, 2025
The reported query appears to be addressed in the latest update. Could you please confirm if everything works as expected? Closing for now, but feel free to reopen if needed.