Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lifeIsGood-love opened this issue Aug 23, 2024 · 1 comment
Labels
charts Chart component

Comments

@lifeIsGood-love
Copy link

lifeIsGood-love commented Aug 23, 2024

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

@{


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

Current count: @currentCount


<button class="btn btn-primary" @OnClick="handleClick">Click me

}

@lifeIsGood-love lifeIsGood-love 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? Aug 28, 2024
@kmuthukumarmkm kmuthukumarmkm added the charts Chart component label Aug 28, 2024
@G-Durga
Copy link

G-Durga commented 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
charts Chart component
Projects
None yet
Development

No branches or pull requests

3 participants