AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.84k stars 2.24k forks source link

Flickering tooltip on small screen #3997

Open aguahombre opened 4 years ago

aguahombre commented 4 years ago

On a small screen device where a tooltip renders over the parent control due to space constraints, the tooltip will continually render and then disappear causing a flickering tooltip.

I assume this is due to the parent control continually gaining and losing focus as the tooltip renders. I tried making the tooltip non focusable but this made no difference.

This is quite difficult to reproduce on a large PC screen but I manged by moving this small window to the bottom of the screen and moving the mouse over the centre of the window:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        SizeToContent="WidthAndHeight" CanResize="False"
        x:Class="AvaloniaApplication3.MainWindow"
        Title="AvaloniaApplication3">
  <Border BorderThickness="3" BorderBrush="Red">
    <ToolTip.Tip>
      <TextBlock Text="Welcome to Avalonia!" Focusable="False" IsHitTestVisible="False"/>
    </ToolTip.Tip>
    <TextBlock Text="Test tooltips" FontSize="36"/>
  </Border>
</Window>

I would expect the tooltip to remain rendered even when the tooltip is rendered under the mouse pointer if it has no focusable content.

Avalonia 0.9.999-cibuild0007752-beta

AidarGiza commented 4 years ago

I have same issue, tooltip doesn't show up, when I expect it on the very bottom of screen

derekantrican commented 2 years ago

I am also seeing this in my application. Similar to the linked issue in the gwent-tracker repo, I think this is caused by when the tooltip cannot be displayed under the cursor due to the closeness with the bottom of the screen and therefore the tooltip is shown higher up.

Here is a screen recording of the issue in my application: https://youtu.be/7bWkBsWczRQ (note that the flickering seems pretty slow in this recording but in actuality it's quite fast). You can see as I move the application closer to the bottom of the screen to force the tooltip to reposition, it flickers unreliably.

Here is the code I'm using to display the tooltip:

<ListBox x:Name="EventList" Grid.Row="1" Margin="0,5,5,0" Items="{Binding EventCheckItems}">
  <ListBox.Styles>
    <Style Selector="ListBoxItem">
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
  </ListBox.Styles>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Panel ToolTip.Tip="{Binding ToolTip}" ToolTip.ShowDelay="0" Background="Transparent">
        <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}"/>
      </Panel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>