Expanding a tooltip after a few seconds

Question

I want to make a tooltip that will expand itself after a few seconds of users focus.

Don't know how to exactly describe this, but got a perfect example. This is a tooltip that is used in AutoCAD Architecture 2014. When I move the mouse over any button, a typical tooltip appears. But after 2-3 seconds of holding the mouse here, the tooltip expands itself into a bigger one. Here are before and after screenshots:

Before:

After:

And some of my test code here. Two buttons, one with a standard tooltip that I want to be at the beginning and the second with its expanded content. How to convert it into one?

 <StackPanel>
    <Button Content="Advanced" Height="50" Width="150" TextBlock.FontSize="20">
        <Button.ToolTip>
            <TextBlock Text="Test"/>
        </Button.ToolTip>
    </Button>
    <Button Height="50" Width="150" Content="Advanced 2" TextBlock.FontSize="20">
        <Button.ToolTip>
            <StackPanel Height="200" Width="200">
                <StackPanel Height="30" Width="200" Orientation="Horizontal"/>
                <Image VerticalAlignment="Top" Width="30" Height="30" Source="C:\tmp\ask.png" Name="image1"/>
                <TextBlock Text="Here will be some more text."/>
            </StackPanel>
        </Button.ToolTip>
    </Button>

</StackPanel>

And the last one, how to make an 'expanding' transition while transforming the tooltip?

Answer 1

Try using a custom style that displays the control with a delay.

    <Window.Resources>

    <Style TargetType="Image" x:Key="DelayShowImage">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsVisible, RelativeSource={RelativeSource AncestorType=StackPanel}}" Value="true">
                <DataTrigger.EnterActions>
                    <BeginStoryboard x:Name="VisibleStory">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                   Duration="0"
                                   BeginTime="0:0:02">
                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="VisibleStory"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</Window.Resources>

 <StackPanel>
        <Button Content="Advanced" Height="50" Width="150" TextBlock.FontSize="20">
            <Button.ToolTip>
                <TextBlock Text="Test"/>
            </Button.ToolTip>
        </Button>
        <Button Height="50" Width="150" Content="Advanced 2" TextBlock.FontSize="20">

            <Button.ToolTip>
                <StackPanel Height="200" Width="200">
                    <StackPanel Height="30" Width="200" Orientation="Horizontal"/>
                    <Image VerticalAlignment="Top" Width="30" Height="30" Source="C:\tmp\ask.png"  Name="image1"
                           Style="{StaticResource DelayShowImage}"/>
                    <TextBlock Text="Here will be some more text."/>
                </StackPanel>
            </Button.ToolTip>
        </Button>
    </StackPanel>

The code from above, displays the Tooltip in the second button, and after 2000ms(0:0:02), it displays the image. You can change the style to be used by a different control that you want to display later.