Tooltip Initial delay not working in WPF? - wpf

Question

I created four buttons in WPF. And I use Tooltip for each button. I give an initial delay value to Tooltip. The Initial delay is working when I first time mouse hover to any of these button but when I move one button to another then no initial delay is triggered. I want to disable Tooltip when I move my mouse cursor from one button control to another. But unfortunately it's not working.
<Button
Style="{StaticResource RoundCorner}"
Name="button1"
Width="71"
HorizontalAlignment="Left"
Margin="381,14,0,0"
Height="24"
VerticalAlignment="Top"
UseLayoutRounding="True"
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="NearestNeighbor"
SnapsToDevicePixels="True"
ToolTipService.InitialShowDelay="1000"
ToolTipService.BetweenShowDelay="0"
ToolTipService.ShowDuration="7000">
<Button.Content>
<TextBlock FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display">
Help
</TextBlock>
</Button.Content>
<Button.ToolTip>
<ToolTip UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display">
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="12" TextOptions.TextFormattingMode="Ideal" >
Help
</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>

Answer 1

The problem is cause by how much time the cursor spends travelling between elements which have tooltips. If there is no time or a very short time then the InitialShowDelay is ignored. This is essentially because the tooltipservice hasn't closed the first tooltip and it still has a tooltip open. It just picks up the tooltip content of the next button.
The simple solution is a gap between the buttons.
This ensures a previous tooltip has closed before the mouse is over another element with a tooltip.
Hence if you try the below:
<StackPanel>
<Button Content="Apple"
ToolTipService.InitialShowDelay="1000"
ToolTipService.BetweenShowDelay="2"
ToolTip="An Apple"
Margin="5"
/>
<Button Content="Banana"
ToolTip="A Banana"
ToolTipService.InitialShowDelay="1000"
ToolTipService.BetweenShowDelay="2"
Margin="5"
/>
<Button Content="Carrot"
ToolTip="Orange Carrot"
ToolTipService.InitialShowDelay="1000"
ToolTipService.BetweenShowDelay="2"
Margin="5"
/>
</StackPanel>
There's a gap between the buttons and there will be a delay if you move the cursor from the first to second button.
In the picture, notice there is a gap between the buttons.
If you remove that margin I have on all the buttons there will be no gap and the second tooltip will show immediately when you move the mouse from the first to second button.
If you can only have a small gap then a rather more complicated solution is necessary. You need to null or close the tooltip immediately the mouse leaves one of the buttons.
One way to do that would be using a trigger.
Triggers set properties when their logic is satisfied so set the property to null using a style so it's null when the trigger is false.
When the mouse is over the button, set the tooltip to a value.
Thus the button only has a tooltip when the mouse is over it and our first tooltip will be nulled immediately the mouse moves off the button.
You need somewhere to put the tooltip markup and you could add an attached property but the below solution uses the button Tag.
Minimal or No Gap:
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="ToolTip" Value="{x:Null}" />
<Setter Property="ToolTipService.InitialShowDelay" Value="1000"/>
<Setter Property="ToolTipService.BetweenShowDelay" Value="0"/>
<Setter Property="Margin" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ToolTip" Value="{Binding Tag, RelativeSource={RelativeSource Self}}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<Button Content="Apple">
<Button.Tag>
<TextBlock Text="This textBlock illustrates a more sophisticated tag" FontFamily="Segoe UI" FontSize="12"/>
</Button.Tag>
</Button>
<Button Content="Banana"
Tag="A Banana"
/>
<Button Content="Carrot"
Tag="Orange Carrot"
/>
</StackPanel>
</Grid>
Note that the first button uses dot notation to illustrate how you would put any markup you like inside the tag rather than just the string the second and third buttons use.
If you want a style to incorporate the settings from another style you can use BasedOn:
<Style TargetType="{x:Type Button}" x:Key="RoundCorner">
.....
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource RoundCorner}">
This style has no key so it'll be applied to all buttons within it's scope. You could give the style a key if you don't want it applied to some buttons.

Answer 2

I don't know what is wrong with the ToolTipService but the only thing that works for me is to set BetweenShowDelay to a small integer value and then the behavior I'm looking for works. I know the documentation says BetweenShowDelay should be in milliseconds but when I try to use a ms value, tooltips will be immediately displayed as I mouseover one control to the next after the InitialShowDelay as elapsed for one control. I even checked the .NET reference source and I could not find an issue with the code (https://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/PopupControlService.cs,dd8bf024ff5d4d74)
This is what works for me:
<StackPanel>
<Button ToolTipService.InitialShowDelay="2000"
ToolTipService.BetweenShowDelay="1"
ToolTip="Say something" />
<Button ToolTipService.InitialShowDelay="2000"
ToolTipService.BetweenShowDelay="1"
ToolTip="Say something else" />
</StackPanel>
After the "Say something" tooltip displays, if I mouseover the next button, the tooltip won't display until the initial delay of 2000ms has elapsed. This isn't how the documentation and reference source says it should work but this is how I got it to work for me to get the intended behavior.