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


    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

  2. Yavor
    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:

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

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

    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,
    the Telerik team

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

  3. DevCraft R3 2016 release webinar banner
Back to Top