How do you style a tooltip?

[Patric Svensson]

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! 

[Yavor]

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