How do you style a tooltip?

2 posts, 0 answers
  1. Patric Svensson
    Patric Svensson avatar
    14 posts
    Member since:
    Nov 2006

    Posted 21 May 2012 Link to this post

    Hi,

    I've got a Chart that has a set of series definitions bound to it (MVVM) and the series definition is created like this:

    var seriesDefinition = new LineSeriesDefinition();
    seriesDefinition.ShowItemLabels = false;
    seriesDefinition.ShowItemToolTips = true;
    seriesDefinition.ItemToolTipFormat = "#Y{#,#}";

    My question is, is there a way to change the behavior/style of the tooltip?

    I want to do the following:
    * Show it faster, I want the tooltip to show up instantly when I hover a point in the line
    * Add some inne-margins (padding)
    * Change background / foreground / border color

    Thanks! 
  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 23 May 2012 Link to this post

    Hi Patric,

    You can customize the tooltip by applying a style over it. Here is how: Add this to the resources of your usercontrol where your chart resides:

    <UserControl.Resources>
        <Style TargetType="telerik:ItemToolTip2D">
            <Setter Property="Padding" Value="3" />
            <Setter Property="InnerBorderBrush" Value="Blue" />
        </Style>
    </UserControl.Resources>

    For your information here is the full template that the tooltip uses:
    <ControlTemplate TargetType="telerik:ItemToolTip2D">
                            <telerik:ClipPanel>
                                <Border x:Name="ToolTipBorder"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            CornerRadius="0"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            Opacity="{TemplateBinding BorderOpacity}">
                                    <Border BorderThickness="{TemplateBinding InnerBorderThickness}"
                                                CornerRadius="0"
                                                BorderBrush="{TemplateBinding InnerBorderBrush}"
                                                Background="{TemplateBinding Background}"
                                                Padding="{TemplateBinding Padding}">
                                        <ContentControl Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" />
                                    </Border>
                                    <Border.Triggers>
                                        <EventTrigger RoutedEvent="Border.Loaded">
                                                <EventTrigger.Actions>
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.6"
                                                                                           Storyboard.TargetName="ToolTipBorder"
                                                                                           Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="1"/>
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger.Actions>
                                            </EventTrigger>
                                    </Border.Triggers>
                                </Border>
                            </telerik:ClipPanel>
                        </ControlTemplate>

    About the speed at which the tooltip gets open, unfortunately you cannot change the initial delay before showing the tooltip. We have addressed this limitation in our new charting solution - the RadChartView. Kind regards,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
Back to Top