DevComponents.Silverlight.Controls.SuperToolTip is ContentControl which, in addition to the inherited Content and ContentTemplate properties, exposes the following content properties:

  • Header
  • HeaderTemplate
  • Footer
  • FooterTemplate
  • FooterImageSource – A Uri referencing the location of an image to display along side the footer.

The following properties are used to control the timing and placement of the tool tip when it opens:

  • Delay – a Duration specifying the  amount time elapse between when the mouse enters an element’s boundaries to when the tool tip opens. Default value is 0.7 seconds.
  • Placement – A property of type PlacementMode which specifies whether the popup should be aligned with the current mouse position or positioned at the top, left, right or bottom of a target element.
  • PlacementTarget – A UIElement which serves as positioning anchor.
  • HorizontalOffset
  • VerticalOffset

Animations can be defined to run when the tool tip opens and/or closes using properties OpeningAnimation and ClosingAnimation respectively. Both animation properties are of type System.Windows.Media.Animation.Storyboard.

To get or set whether the tool tip is open, use the IsOpen property.

Associating a SuperToolTip with an Element

SuperToolTip can be used with the standard Silverlight ToolTipManager but doing so disables the positioning and animation features. The easiest way to hook up a super tool tip is to use the SuperToolTip.ToolTip attached dependency property. Alternatively, you can call method SuperToolTip.AddOwner to associate an UIElement with your tool tip.

Here is an example of a SuperToolTip created in Xaml. It will open when the mouse hovers over the parent boarder for the Delay of 0.6 seconds. The FooterTemplate is used to make the footer text italic. The content property is defined as a UIElement so that two separate text blocks can be used. This tool tip also has a closing animation.

Note: ctrls = namespace DevComponents.Silverlight.Controls

<Border Background="LightBlue" BorderBrush="Black" BorderThickness="1" Width="100" VerticalAlignment="Center">                    
    <TextBlock Text="Hover here to sample Super ToolTip" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" />
    <ctrls:SuperToolTip.ToolTip>
        <ctrls:SuperToolTip Name="ToolTip" Height="200" Width="250"
                            Placement="Bottom" Delay="0:0:0.6"
                            Header="Super ToolTip" 
                            Footer="DotNetBar for Silverlight">
            <ctrls:SuperToolTip.FooterTemplate>
                <DataTemplate>
                    <TextBlock FontStyle="Italic" Text="{Binding}" />
                </DataTemplate>
            </ctrls:SuperToolTip.FooterTemplate>
            <ctrls:SuperToolTip.Content>
                <StackPanel>
                    <TextBlock TextWrapping="Wrap" Text="Ribbon tool tips are based on SuperToolTip. You can use super tool tips in your application." />
                    <TextBlock Margin="0,7,0,0" TextWrapping="Wrap" Text="This tool tip has a closing animation, which you will notice when you move the mouse out of the border's boundaries." />
                </StackPanel>
            </ctrls:SuperToolTip.Content>
            <ctrls:SuperToolTip.ClosingAnimation>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" Duration="0:0:0.5" To="0" />
                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.5" To="0" />
                </Storyboard>
            </ctrls:SuperToolTip.ClosingAnimation>
        </ctrls:SuperToolTip>
    </ctrls:SuperToolTip.ToolTip>
</Border>

Control Template

Here is the generic control template for SuperToolTip which you can use as a starting place for creating your own template. Note the use of the DynamicResource behavior for setting various element brushes, making it so the tool tip colors will be updated when the active color theme changes.

In this template, the namespace qualifier ‘ctrls’ refers to DevComponents.Silverlight.Controls.

<ControlTemplate TargetType="ctrls:SuperToolTip">
    <Grid>                        
        <Border BorderThickness="1" CornerRadius="2" Padding="5"
                ctrls:DynamicResource.BackgroundKey="ToolTipBackground" 
                ctrls:DynamicResource.BorderBrushKey="ToolTipBorder">
            <Border.Effect>
                <DropShadowEffect BlurRadius="2" Opacity="0.1" />
            </Border.Effect>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition  />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ContentControl Name="HeaderPresenter" FontWeight="Bold" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                <ContentPresenter Name="ContentPresenter"  Margin="10,5" Grid.Row="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                <Grid Name="FooterGrid" Grid.Row="2" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
 
                    <Border Grid.ColumnSpan="2" Height="2" BorderThickness="0,1,0,0" 
                            ctrls:DynamicResource.BorderBrushKey="ToolTipSeparatorBorder" 
                            ctrls:DynamicResource.BackgroundKey="ToolTipSeparatorBackground" />
                    <Image Margin="0,5,0,0" Grid.Row="1" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FooterImageSource}" />
                    <ContentPresenter Margin="5,5,0,0" Grid.Row="1" Grid.Column="1" Content="{TemplateBinding Footer}" ContentTemplate="{TemplateBinding FooterTemplate}" />
 
                </Grid>
            </Grid>
        </Border>                        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="HasHeaderFooterStates">
                <VisualState Name="HasNone">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderPresenter" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="5,0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="HasHeader" />
                <VisualState Name="HasFooter">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FooterGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="HasHeaderAndFooter">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FooterGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>                    
    </Grid>
</ControlTemplate>

Related posts:

  1. Customizing Appointment Views in Silverlight Schedule
  2. AutoClosePopup Control
  3. Customizing Month View Days in Silverlight Schedule
  4. Clock Control Quick Start Guide
  5. ContextMenu Control