We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom toolip builder, inkwell/TextButton hover dont line up with child


Pretty simple question. I have a custom tooltip builder and i want to use either inkwell or a textbutton to click on inside the tooltip. But when i hover over the button or text, it doesnt line up with the child. See this image. I highlighted the sections in a yellow box. You can see the hover over color appears in the top left corner of the chart, the area where my cursor needs to hover over the text is to the left (where i have to hover to be able to click on the text)(green box) and the text itself looks like its in the correct position. Its just the hover over color and the where i need to put my cursor to click it is shifted.


2 Replies

YG Yuvaraj Gajaraj Syncfusion Team March 20, 2023 12:14 PM UTC

Hi Jesse,

Currently, we are validating and trying to replicate the reported issue at our end and we will update the complete details in one business day on 21 March 2023. We appreciate your patience until then.



YG Yuvaraj Gajaraj Syncfusion Team March 21, 2023 05:42 PM UTC

Hi Jesse,

We have tried to reproduce the reported issue that the hover color is not aligned properly and the issue getting reproduced at our end. To resolve this wrap the InkWell widget inside the Material widget and set its type as MaterialType.transparency will help you to show the hover color within the tooltip builder. We have shared the code snippet below for your reference.

Code snippet:

_tooltipBehavior = TooltipBehavior(
enable: true,
builder: (data, point, series, pointIndex, seriesIndex) {
return Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
hoverColor: Colors.green,
child: Text(
style: const TextStyle(color: Colors.white),




Live Chat Icon For mobile
Up arrow icon