blazor-samples icon indicating copy to clipboard operation
blazor-samples copied to clipboard

sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip?

Open lifeIsGood-love opened this issue 1 year ago • 1 comments

sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip?<ChartTooltipSettings Enable="true" Shared="true"> <Template> @{

<button @onclick="IncrementCount">Ian Click me

Current count: @currentCount

<button class="btn btn-primary" @onclick="handleClick">Click me
}
</Template> </ChartTooltipSettings>

lifeIsGood-love avatar Aug 23 '24 09:08 lifeIsGood-love

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

G-Durga avatar Feb 12 '25 16:02 G-Durga

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.

kmuthukumarmkm avatar Jul 03 '25 12:07 kmuthukumarmkm