Click event inside custom tooltip not working

[duynguyen224]

Thanks a lot for the awesome Blazor-ApexCharts library, it’s saved me tons of time!
I’ve run into a small issue with the .NET custom tooltip (<ApexPointTooltip> render-fragment version): @onclick handlers inside the tooltip never fire.

Description
When using custom tooltip dotnet, click events (e.g., @OnClick on a button) inside the tooltip are not fired. The tooltip renders correctly and stays visible on hover (with custom CSS), but interactions like button clicks do not trigger the event handler.

Steps to Reproduce
Setup blazor apexcharts follow installation guide
Create a Blazor component with the code below.
Hover over a data point to show the custom tooltip.
Click the "Click me" button inside the tooltip.
Observe that the ClickMe() method is not called, and the message does not update.

Code Example

<h3>
    Message: <span style="color: red; font-weight: bold;">@Message</span>
</h3>
<ApexChart TItem="MyData"
           Width="@("100%")"
           Height="@("500px")"
           Title="Sample Data">
    <ApexPointTooltip>
        <div style="padding: 1rem;">
            <p>Button inside the tooltip.</p>
            <button @onclick=ClickMe>Click me</button>
        </div>
    </ApexPointTooltip>
    <ChildContent>
        <ApexPointSeries TItem="MyData"
                         Items="Data"
                         Name="Net Profit"
                         SeriesType="SeriesType.Bar"
                         XValue="e => e.Category"
                         YValue="e => e.NetProfit" />
        <ApexPointSeries TItem="MyData"
                         Items="Data"
                         Name="Revenue"
                         SeriesType="SeriesType.Bar"
                         XValue="e => e.Category"
                         YValue="e => e.Revenue" />
    </ChildContent>
</ApexChart>

@code {
    private List<MyData> Data { get; set; } = new();
    string Message = "OnClick event inside custom tooltip not work.";

    protected override void OnInitialized()
    {
        Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
        Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
        Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
    }

    void ClickMe()
    {
        Message = "Button inside tooltip is clicked.";
    }

    public class MyData
    {
        public string Category { get; set; } = string.Empty;
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}

Additional CSS (to keep tooltip always visible on hover for testing)
Add this to your component's CSS or global styles:

.apexcharts-tooltip {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1000;
}

Expected Behavior
The ClickMe() method should execute on button click, updating the Message variable and re-rendering the UI.

Actual Behavior
The button click does nothing; no console errors or event firing.

[joadan]

Hi,

I'm sorry but this is a limitation with the custom .Net tooltips implementation.
Currently we render the .Net tooltip in an container and then move the html to the chart tooltip container.

Maybe there is an better way to do this...