How to allow Tooltip to go over container borders?

[justus hinken]

Hi Syncfusion team,

I am using the Blazor SfChart component and have implemented a custom tooltip using the <Template> feature in ChartTooltipSettings. However, I noticed that the tooltip is always rendered inside the chart container, which causes it to hide underlaying values when the mouse is near the chart edges (especially when the chart is inside a dashboard panel) instead of going over the container borders.

Is there a recommended way in Syncfusion Blazor Charts to:

•     Render the tooltip outside the chart container (e.g., as a fixed overlay)?
•     Dynamically position the tooltip at the mouse cursor coordinates, even if the mouse is near the chart edges?

I would like to always have it on the right under my cursor.

Any guidance or examples would be greatly appreciated!

Thank you.

Attachment: Screenshot_20251030_093136_4bce1fd3.png

[Durga Gopalakrishnan]

Hi Justus,

Greetings from Syncfusion.

We’d like to clarify the behavior of the chart series tooltip. By design, when hovering over a data point near the right edge of the chart, the tooltip is automatically repositioned within the chart area to prevent it from being cropped. This is the intended behavior of the component.

If you have any concerns or need further clarification, please feel free to reach out. We’re happy to assist!

Regards,

Durga Gopalakrishnan.

[justus hinken]

Hey Durga,

Thank you very much for your reply.

I found this entry on your site: https://support.syncfusion.com/kb/article/16654/how-to-display-chart-tooltip-without-cutoff-in-blazor-charts. It looks good, guess now i need only a fixed position.

Would it be possible to use the template to position the tooltip at a specific position relative to my cursor—for example, 5 pixels down and to the right?

It would be easier on the eye if the tooltip always had the same position and didn't change.

Kind Regards

[justus hinken]

And one more addition to the question. Unfortunately, if the tooltip extends beyond the edge of the panel, it is hidden behind the panel that is rendered later on the dashboard layout. Please see the attached image.

Is there a solution as well?

Kind Regards!

Attachment: Screenshot_20251103_173059_768d3d82.png

[Durga Gopalakrishnan]

We are analyzing your required scenarios. We will update the further details within one business day. We appreciate your patience in the meantime.

[Durga Gopalakrishnan]

Justus,

Thanks for being patience. 

# 1 : Would it be possible to use the template to position the tooltip at a specific position relative to my cursor—for example, 5 pixels down and to the right?

As of now, we don’t have support to place the tooltip in fixed location. We have considered your requirement as feature and logged a feature request on “Support to display tooltip in specified position”. Based on other logged tasks priority, we will include this feature in any of our upcoming release. You can keep track of the feature from the feedback portal below. 

Feedback :  https://www.syncfusion.com/feedback/71101/support-to-display-tooltip-in-specified-position

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

# 2 : if the tooltip extends beyond the edge of the panel, it is hidden behind the panel that is rendered later on the dashboard layout.

We’ve tested the reported scenario by rendering the chart inside a dashboard layout with a shared tooltip. However, we were unable to reproduce the issue on our end. For your reference, we’ve attached the tested sample.

Sample : https://blazorplayground.syncfusion.com/BZByWMZHAaohQcvV

To help us investigate further, we kindly request the following information:

• Please try to replicate the issue using the shared sample.
• Share an issue reproduced sample or code snippet.
• A video demonstrating the problem you’re encountering.
• Details of any additional customizations applied to the chart or layout.

This information will greatly assist us in analyzing the issue more effectively. Looking forward to your response.

[justus hinken]

Oh no.. 

I thought I had found a solution with:

<style>

    .e-chart {

        overflow: visible !important;

    }

</style>

However, strangely enough, this creates a pinch target at the top left. This can lead to not beeing able to click on another panel underneath it. Please see attached image.

I searched for something similar in this forum entry: https://www.syncfusion.com/forums/178738/pinch-target. However, I have installed a significantly higher version.

Is there a way of disabeling?

Kind Regards

Attachment: Screenshot_20251119_093540_d2b51caf.png

[Durga Gopalakrishnan]

Justus,

We attempted to replicate the issue where the tooltip appears outside the chart area for data points near the right edge but we were unable to reproduce the problem. Could you please clarify the scenario in which you encountered this issue?

Is it possible to replicate the problem using the sample provided below, or alternatively, share a sample where the issue occurs along with a video? This will help us analyze the problem further and assist you better.

Sample: https://blazorplayground.syncfusion.com/BZByWMZHAaohQcvV

By default, for points near the right edge, if the tooltip width exceeds the chart area bounds, it is automatically repositioned inside the chart area. This behavior is built-in and also applies to points near the top and bottom edges to prevent clipping.

Please let us know if you have any concerns.