An issue with the ToolTip shadow area intercepting mouse events in Avalonia 11.3.5

[Sharik2468]

While developing an interface using the standard tooltip mechanism (ToolTip) in Avalonia version 11.3.5, we encountered an unexpected behavior that significantly degrades the user experience. The problem is that the visual shadow added to the tooltip via a large margin and the BoxShadow property creates a large area around the tooltip content that intercepts all mouse events, preventing them from reaching the button or other control underneath. This means that when attempting to click within the area visually occupied by the shadow (but not the tooltip text itself), the button becomes unresponsive and loses its PointerOver state, disorienting the user.

Avalonia's ToolTip is implemented using the Popup control, which creates a separate window (or layer) outside the application's main visual tree. This allows the tooltip to appear on top of the rest of the interface without disrupting the page structure. In our case, we defined a style for the ToolTip that includes a decorative Border element with a large Margin="25" value and a shadow using the BoxShadow property. A simplified fragment of this style is shown below:

<ControlTheme x:Key="{x:Type ToolTip}" TargetType="ToolTip">
	<Setter Property="Foreground" Value="{DynamicResource ToolTipForeground}" />
	<Setter Property="Background" Value="{DynamicResource ToolTipBackground}" />
	<Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
	<Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThemeThickness}" />
	<Setter Property="FontSize" Value="{DynamicResource ToolTipContentThemeFontSize}" />
	<Setter Property="Padding" Value="{DynamicResource ToolTipBorderThemePadding}" />
	<Setter Property="MaxWidth" Value="{DynamicResource ToolTipContentMaxWidth}" />
	<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
	<Setter Property="Opacity" Value="0" />
	<Setter Property="Transitions">
		<Transitions>
			<DoubleTransition Property="Opacity" Duration="0:0:0.15" />
		</Transitions>
	</Setter>
	<Setter Property="Template">
		<ControlTemplate>
			<Border Name="PART_LayoutRoot"
					BorderThickness="{TemplateBinding BorderThickness}"
					Background="{TemplateBinding Background}"
					BorderBrush="{TemplateBinding BorderBrush}"
					Padding="{TemplateBinding Padding}"
					CornerRadius="{TemplateBinding CornerRadius}"
					Margin="25"
					BoxShadow="10 10 10 10 #000, 0 0 10 10 #2fff">
				<ContentPresenter Name="PART_ContentPresenter"
								  MaxWidth="{TemplateBinding MaxWidth}"
								  Content="{TemplateBinding Content}"
								  ContentTemplate="{TemplateBinding ContentTemplate}"
								  TextBlock.TextWrapping="Wrap"/>
			</Border>
		</ControlTemplate>
	</Setter>

	<Style Selector="^:open">
		<Setter Property="Opacity" Value="1" />
	</Style>
</ControlTheme>

Using Margin="25" creates empty space around the tooltip content, which is still part of the Border display area. Even if the background of this area is transparent or absent, it remains clickable, since the Border (and, consequently, the Popup window) extends across this entire area. BoxShadow adds a visual shadow effect but doesn't affect the geometry of the mouse hit area—it is determined solely by the element's dimensions and margins.

The key feature of a Popup is that it creates an independent window (or top-level child window) that receives its own mouse events. When the cursor hovers over any part of this window—even a transparent area—all mouse events are directed to this window, not to the window underneath it (in this case, the main application window containing the button). This is standard behavior for window systems: transparent pixels in a window do not make the window "invisible" to the mouse; the window still captures mouse input when it's under the cursor, regardless of the transparency of its contents. Therefore, even if you set Background="Transparent" for Border or for the entire Popup, the area occupied by the tooltip window (including its Margin) will continue to capture mouse input.

Avalonia has mechanisms for marking window regions as hit-transparent (for example, IsHitTestVisible or the Transparent property of Window), but these mechanisms operate at the level of the window itself, not individual elements within it. In the case of Popup, we do not have direct access to the window settings, and the standard methods (IsHitTestVisible="False", Background="Transparent") do not produce the desired effect, since they only affect the logic of event handling inside Popup, but not the fact of intercepting events by the window.

The problem described is the result of a combination of two factors: using a Popup to display a tooltip and the use of decorative elements with large margins that expand the window's mouse-capturing area. Avalonia, like many other cross-platform UI frameworks, inherits the operating system's windowing subsystem, making mouse-transparent windows a challenging task.

We hope the Avalonia developers can offer a solution that either changes Popup behavior or provides more flexible controls for tooltip hitboxes. Perhaps we should consider adding the IsPopupTransparentForMouseInput property or automatically setting the appropriate window flag when necessary. Improving the documentation for Popups and tooltips could also help, allowing developers to avoid similar situations.

In the meantime, we are exploring workarounds, such as removing large margins in ToolTip styles and using other methods of creating shadows that don't affect geometry. But I would like to receive an official decision or recommendation from the Avalonia team to prevent such problems from arising in the future.