Skip to content

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

@lifeIsGood-love

Description

@lifeIsGood-love

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

}

Activity

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

G-Durga commented on Feb 12, 2025

@G-Durga

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

kmuthukumarmkm commented on Jul 3, 2025

@kmuthukumarmkm
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    chartsChart component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @lifeIsGood-love@kmuthukumarmkm@G-Durga

        Issue actions

          sfchart chartTooltipSetting component ,Is it possible to add a custom tooltip and add a click function to the tooltip? · Issue #171 · syncfusion/blazor-samples